antissoft / NetworkInformation

<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="NCC-dialog NCC-dialog_center baseInspectionReportForm"
    lock-scroll
    width="50%"
    :modal="false"
  >
    <el-row :gutter="15" class="NCC-dialog-content" v-if="!isDetail">
      <el-form
        ref="elForm"
        :model="dataForm"
        size="small"
        label-width="100px"
        label-position="right"
        :disabled="!!isDetail"
        :rules="rules"
      >
        <el-col :span="23" v-if="false">
          <el-form-item label="主键" prop="id">
            <el-input v-model="dataForm.id" placeholder="请输入" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="问题来源" prop="reportSource">
            <el-radio-group v-model="dataForm.reportSource">
              <el-radio v-for="(item, index) in sourceOptions" :key="index" :label="item.Id">{{ item.FullName }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="应用名称" prop="platformName">
            <el-select
              ref="select"
              v-model="dataForm.platformName"
              filterable
              remote
              reserve-keyword
              placeholder="请输入应用名称"
              @blur.native.capture="selectBlur"
              @visible-change="visibleNameChange"
              @change="(val) => platformNameChange(val, 'change')"
              :loading="name_loading"
              :disabled="!!this.dataForm.id">
              <el-option v-for="item in nameOptions" :key="item.id" :label="item.systemName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="运营主体" prop="company">
            <el-select
              v-model="dataForm.company"
              placeholder="请选择运营主体"
              clearable
              filterable 
              style="width: 100%"
              :disabled='isDisabledTypeByName || !!this.dataForm.id'
            >
              <el-option
                v-for="item in companyOptions"
                :key="item.id"
                :label="item.companyName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="应用类型" prop="platformType">
            <el-radio-group v-model="dataForm.platformType" :disabled='isDisabledTypeByName || !!this.dataForm.id'>
              <el-radio v-for="(item, index) in platformTypeOptions" :key="index" :label="item.Id">{{ item.FullName }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="23" v-show="dataForm.platformType == '580634746028033285' && !isDisabledTypeByName">
          <el-form-item label="归属平台" prop="selfMediaPlatformType">
            <el-radio-group v-model="dataForm.selfMediaPlatformType" :disabled="!!this.dataForm.id">
              <el-radio v-for="(item, index) in mediaPlatList" :key="index" :label="item" >{{ item }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="23" v-show="dataForm.selfMediaPlatformType == '其他'">
          <el-form-item label="其他归属平台" prop="selfMediaPlatformTypeOther">
            <el-input v-model="dataForm.selfMediaPlatformTypeOther" placeholder="请输入其他归属平台" clearable :style="{ width: '100%' }" />
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="问题类型" prop="questionType">
            <el-radio-group v-model="dataForm.questionType">
              <el-radio v-for="(item, index) in questionTypeOptions" :key="index" :label="item.fullName" >{{ item.fullName }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="23" v-show="dataForm.questionType == '其他'">
          <el-form-item label="其他问题类型" prop="otherQuestionType">
            <el-input v-model="dataForm.otherQuestionType" placeholder="请输入其他问题类型" clearable :style="{ width: '100%' }" />
          </el-form-item>
        </el-col>
        <el-col :span="23" v-show="dataForm.questionType == '错误表述'">
          <el-form-item label="正确描述" prop="accurateDescription">
            <el-input v-model="dataForm.accurateDescription" placeholder="请输入正确描述" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23" v-show="dataForm.questionType == '错误表述'">
          <el-form-item label="错误描述" prop="incorrectDescription">
            <el-input v-model="dataForm.incorrectDescription" placeholder="请输入错误描述" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="问题内容" prop="questionContent">
            <el-input v-model="dataForm.questionContent" placeholder="请输入" show-word-limit :style="{ width: '100%' }" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="23">
          <el-form-item label="链接" prop="link">
            <el-input v-model="dataForm.link" placeholder="请输入链接" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="23">
          <el-form-item label="关键词" prop="questionClass">
            <el-input v-model="dataForm.questionClass" placeholder="请输入关键词" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="附件" prop="annex">
            <NCC-UploadFz v-model="dataForm.annex" :fileSize="5" sizeUnit="MB" :limit="9" buttonText="点击上传" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row v-else>
      <el-col class="form-item">
        <div class="label">问题来源：</div>
        <div class="text">{{ sourceOptions.find(v => v.Id == dataForm.reportSource).FullName || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label">应用名称：</div>
        <div class="text">{{ dataForm.platformNameStr || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label">运营主体：</div>
        <div class="text">{{ dataForm.companyStr || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label">应用类型：</div>
        <div class="text">{{ dataForm.platformTypeStr || '--' }}</div>
      </el-col>
      <el-col class="form-item" v-if="dataForm.platformType == '580634746028033285'">
        <div class="label">归属平台：</div>
        <div class="text">{{ dataForm.selfMediaPlatformType || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label">问题类型：</div>
        <div class="text">{{ dataForm.questionType || '--' }}</div>
      </el-col>
      <el-col class="form-item" v-show="dataForm.questionType == '错误表述'">
        <div class="label">正确描述：</div>
        <div class="text">{{ dataForm.accurateDescription || '--' }}</div>
      </el-col>
      <el-col class="form-item" v-show="dataForm.questionType == '错误表述'">
        <div class="label">错误描述：</div>
        <div class="text">{{ dataForm.incorrectDescription || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label">问题内容：</div>
        <div class="text">{{ dataForm.questionContent || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label">关键词：</div>
        <div class="text">{{ dataForm.questionClass || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label">附件：</div>
        <NCC-UploadFz v-model="dataForm.annex" :fileSize="5" sizeUnit="MB" :limit="9" buttonText="点击上传" disabled/>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail" :loading="btnLoading">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { getDetail, addForm, updataForm } from "@/api/systemData/dataInterface";
import { MediaPlatList } from "@/assets/data"
import { getInfoList } from "@/api/baseData/info";
export default {
  components: {},
  props: [],
  data() {
    return {
      loading: false,
      visible: false,
      name_loading: false,
      isDetail: false,
      dataForm: {
        id: undefined,
        reportSource: undefined,
        platformNameStr: undefined,
        platformTypeStr: undefined,
        companyStr: undefined,
        platformName: '',
        selfMediaPlatformType: '',
        platformType: undefined,
        questionType: undefined,
        questionClass: undefined,
        questionContent: undefined,
        link: undefined,
        accurateDescription: undefined,
        incorrectDescription: undefined,
        annex: [],
        otherQuestionType: undefined,
        selfMediaPlatformTypeOther: undefined,
        company: undefined,
      },
      rules: {
        platformName: [
          { required: true, message: "请选择应用名称", trigger: "blur" },
        ],
        company: [
          { required: true, message: "请选择运营主体", trigger: "blur" },
        ],
        platformType: [
          { required: true, message: "请选择应用类型", trigger: "blur" },
        ],
        questionType: [
          { required: true, message: "请选择问题类型", trigger: "blur" },
        ],
        // otherQuestionType: [
        //   { required: true, message: "请输入其他问题类型", trigger: "blur" },
        // ],
      },
      sourceOptions: [],
      platformTypeOptions: [],
      questionTypeOptions: [],
      nameOptions: [],
      mediaPlatList: MediaPlatList,
      companyOptions: [],
      btnLoading: false,
    };
  },
  computed: {
    isDisabledTypeByName() {
      if(!this.nameOptions.length) return false;
      let index = this.nameOptions.findIndex(v => v.id == this.dataForm.platformName);
      return index != -1;
    }
  },
  watch: {},
  created() {
    this.initCompanyList();
    this.loadList();
    this.getSourceOptions();
    this.getplatformTypeOptions();
    this.getquestionTypeOptions();
  },
  mounted() {},
  methods: {
    async initCompanyList() {
      request({
        url: `/Extend/basecomapnyinfo/GetNoPagingList`,
        method: "GET",
      }).then(({data}) => {
        this.companyOptions = data;
      })
    },
    selectBlur(e) {
      let value = e.target.value;
      if(!value) return;
      this.dataForm.platformName = e.target.value;
      this.platformNameChange(value, 'blur');
    },
    platformNameChange(val, type) {
      let obj = this.nameOptions.find(v => type == 'blur' ? val == v.fullName : val == v.id);
      if(!obj) return;
      this.dataForm.platformName = obj ? obj.id : val;
      this.dataForm.company = this.companyOptions.find(v => v.id == obj.companyId || v.companyName == obj.companyId).id;
      console.log(this.dataForm.company, 'this.dataForm.company');
      this.dataForm.platformType = this.platformTypeOptions.find(v => v.Id == obj.systemType || v.FullName == obj.systemType).Id;
      this.dataForm.selfMediaPlatformType = obj ? obj.platform : '';
    },
    visibleNameChange(val) {
      if (val) return
      let input = this.$refs.select.$children[0].$refs.input;
      input.blur();
    },
    loadList() {
      this.name_loading = true;
      request({
        url: `/Extend/basesysteminfo/GetNoPagingList`,
        method: "GET",
      }).then(({data}) => {
        this.nameOptions = data;
        this.name_loading = false;
      })
    },
    async getplatformTypeOptions() {
      let list = this.$store.state.meta.system;
      !list && (list = await this.$store.dispatch("getTypeListByCode", "system"));
      this.platformTypeOptions = list;
    },
    async getSourceOptions() {
      request({
        url: `/Extend/baseinspectionreport/GetReportSourceList`,
        method: "GET",
      }).then(({data}) => {
        this.sourceOptions = data;
      })
    },
    getquestionTypeOptions() {
      getDictionaryDataSelector("577006814432855301").then((res) => {
        this.questionTypeOptions = [...res.data.list, {Id: '0', fullName: '其他'}];
      });
    },
    goBack() {
      this.$emit("refresh");
    },
    init(id, isDetail) {
      this.dataForm.id = id || '';
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(async () => {
        !isDetail && this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          let res = await getDetail(this.dataForm.id);
          if(!res.data) return;
          this.dataForm = res.data;
          if(this.questionTypeOptions.findIndex(v => v.fullName == this.dataForm.questionType) == -1) {
            this.dataForm.otherQuestionType = res.data.questionType;
            this.dataForm.questionType = '其他';
          }
          this.dataForm.selfMediaPlatformType = res.data.selfMediaPlatformType || '--';
        }
      });
    },
    dataFormSubmit() {
      this.$refs["elForm"].validate(async (valid) => {
        if (valid) {
          let obj = {
            ...this.dataForm,
            questionType: this.dataForm.questionType == '其他' ? this.dataForm.otherQuestionType : this.dataForm.questionType,
            selfMediaPlatformType: this.dataForm.selfMediaPlatformType == '其他' ? this.dataForm.selfMediaPlatformTypeOther : this.dataForm.questionType,
          }
          this.btnLoading = true;
          let res = !this.dataForm.id ? await addForm(obj) : await updataForm(obj);
          if (res.code != 200) return this.btnLoading = false;
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              (this.visible = false), this.$emit("refresh", true);
            },
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.baseInspectionReportForm {
  :deep(.el-radio) {
    margin: 0 30px 8px 0;
  }
}
</style>