src/views/baseInspectionReport/Form.vue

<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%"
  >
    <el-row :gutter="15" class="NCC-dialog-content">
      <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="source">
            <el-radio-group v-model="dataForm.source">
              <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="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-input v-model="dataForm.selfMediaPlatformType" placeholder="请输入归属平台" clearable :style="{ width: '100%' }" :disabled="!!this.dataForm.id"/>
          </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="obtainEvidence">
            <NCC-UploadFz v-model="dataForm.obtainEvidence" :fileSize="5" sizeUnit="MB" :limit="9" buttonText="点击上传" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</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 { getInfoList } from "@/api/baseData/info";
export default {
  components: {},
  props: [],
  data() {
    return {
      loading: false,
      visible: false,
      name_loading: false,
      isDetail: false,
      dataForm: {
        id: undefined,
        source: undefined,
        platformName: '',
        selfMediaPlatformType: '',
        platformType: undefined,
        questionType: undefined,
        questionClass: undefined,
        questionContent: undefined,
        link: undefined,
        accurateDescription: undefined,
        incorrectDescription: undefined,
        obtainEvidence: [],
        annex: [],
        otherQuestionType: undefined
      },
      rules: {
        platformName: [
          { 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: [],
    };
  },
  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.loadList();
    this.getSourceOptions();
    this.getplatformTypeOptions();
    this.getquestionTypeOptions();
  },
  mounted() {},
  methods: {
    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);
      this.dataForm.platformName = obj ? obj.id : val;
      this.dataForm.platformType = obj ? obj.systemType : '';
      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 () => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          let res = await getDetail(this.dataForm.id);
          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 || '--';
          if (!this.dataForm.obtainEvidence) this.dataForm.obtainEvidence = [];
          if (!this.dataForm.annex) this.dataForm.annex = [];
        }
      });
    },
    dataFormSubmit() {
      this.$refs["elForm"].validate(async (valid) => {
        if (valid) {
          let obj = {
            ...this.dataForm,
            questionType: this.dataForm.questionType == '其他' ? this.dataForm.otherQuestionType : this.dataForm.questionType,
          }
          let res = !this.dataForm.id ? await addForm(obj) : await updataForm(obj);
          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>