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"
    lock-scroll
    width="70%"
  >
    <el-row :gutter="15" class="">
      <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-input
              v-model="dataForm.source"
              placeholder="请输入问题来源"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="平台名称" prop="platformName">
            <el-select
              v-model="dataForm.platformName"
              filterable
              remote
              reserve-keyword
              placeholder="请输入平台名称"
              :remote-method="loadList"
              :loading="name_loading">
              <el-option
                v-for="item in nameOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </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" :style="{}">
              <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="13">
          <el-form-item label="问题类型" prop="questionType">
            <el-radio-group v-model="dataForm.questionType" @change="questionTypeChange">
              <el-radio
                v-for="(item, index) in questionTypeOptions"
                :key="index"
                :label="item.fullName"
                >{{ item.fullName }}</el-radio
              >
              <el-radio label="其他">其他</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <template v-if="otherQuestion">
          <el-col :span="10">
              <el-input
                v-model="dataForm.otherQuestionType"
                placeholder="请输入问题类型"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
          </el-col>
        </template>
        <template v-if="showErrflag">
          <el-col :span="12">
            <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="11">
            <el-form-item label="错误描述" prop="incorrectDescription">
              <el-input
                v-model="dataForm.incorrectDescription"
                placeholder="请输入错误描述"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </template>
        <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="questionContent">
            <el-input
              v-model="dataForm.questionContent"
              placeholder="请输入"
              show-word-limit
              :style="{ width: '100%' }"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
            >
            </el-input>
          </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="obtainEvidence">
            <NCC-UploadFz
              v-model="dataForm.obtainEvidence"
              :fileSize="5"
              sizeUnit="MB"
              :limit="9"
              buttonText="点击上传"
            >
            </NCC-UploadFz>
          </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: undefined,
        platformType: undefined,
        questionType: undefined,
        questionClass: undefined,
        questionContent: undefined,
        link: undefined,
        accurateDescription: undefined,
        incorrectDescription: undefined,
        obtainEvidence: [],
        annex: [],
        otherQuestionType: undefined
      },
      rules: {
        platformType: [
          { required: true, message: "请选择平台类型", trigger: "change" },
        ],
        questionType: [
          { required: true, message: "请选择问题类型", trigger: "change" },
        ],
        questionClass: [
          { required: true, message: "请选择关键词", trigger: "change" },
        ],
      },
      sourceOptions: [
        { fullName: "市网信办线索", id: "市网信办线索" },
        { fullName: "自主巡查发现", id: "自主巡查发现" },
      ],
      platformTypeOptions: [],
      questionTypeOptions: [],
      questionClassOptions: [
        { fullName: "选项一", id: "1" },
        { fullName: "选项二", id: "2" },
      ],
      stageOptions: [
        { fullName: "选项一", id: "1" },
        { fullName: "选项二", id: "2" },
      ],
      showErrflag: false,
      otherQuestion: false,
      nameOptions: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.loadList();
    this.getplatformTypeOptions();
    this.getquestionTypeOptions();
  },
  mounted() {},
  methods: {
    loadList(query) {
      this.name_loading = true;
      getInfoList({pageIndex: 1, pageSize: 100, keyword: query }).then(({ data }) => {
        let list = [];
        data.list.length &&
          data.list.forEach((item) => {
            list.push({
              label: item.SysytemInfo.SystemName,
              value: item.SysytemInfo.Id,
            });
          });
        this.nameOptions = list;
        this.name_loading = false;
      });
    },
    questionTypeChange(v) {
      this.showErrflag = Boolean(v == '错误表述');
      this.otherQuestion = Boolean(v == '其他');
    },
    async getplatformTypeOptions() {
      let list = this.$store.state.meta.system;
      !list &&
        (list = await this.$store.dispatch("getTypeListByCode", "system"));
      this.platformTypeOptions = list;
    },
    getquestionTypeOptions() {
      getDictionaryDataSelector("577006814432855301").then((res) => {
        this.questionTypeOptions = res.data.list;
      });
    },
    goBack() {
      this.$emit("refresh");
    },
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.otherQuestion = false;
      this.showErrflag = false;
      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 = '其他';
          }
          if (!this.dataForm.obtainEvidence) this.dataForm.obtainEvidence = [];
          if (!this.dataForm.annex) this.dataForm.annex = [];
          this.$nextTick(() => {
            this.questionTypeChange(this.dataForm.questionType);
          })
        }
      });
    },
    getQuestionTypeName() {
      if(this.dataForm.questionType == '其他') {
        return this.dataForm.otherQuestionType;
      } else {
        return this.dataForm.questionType;
      }
    },
    dataFormSubmit() {
      this.$refs["elForm"].validate(async (valid) => {
        if (valid) {
          this.dataForm.questionType = this.getQuestionTypeName();
          let res = !this.dataForm.id
            ? await addForm(this.dataForm)
            : await updataForm(this.dataForm);
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              (this.visible = false), this.$emit("refresh", true);
            },
          });
        }
      });
    },
  },
};
</script>