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="platformName">
            <el-input
              v-model="dataForm.platformName"
              placeholder="请输入问题来源"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="平台名称" prop="platformName">
            <SelsctLoad v-model="dataForm.platformName"/>
            <!-- <el-input
              v-model="dataForm.platformName"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input> -->
          </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="23">
          <el-form-item label="问题类型" prop="questionType">
            <el-radio-group v-model="dataForm.questionType" :style="{}">
              <el-radio
                v-for="(item, index) in questionTypeOptions"
                :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="questionClass">
            <el-select
              v-model="dataForm.questionClass"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in questionClassOptions"
                :key="index"
                :label="item.fullName"
                :value="item.id"
              ></el-option>
            </el-select>
          </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="12">
          <el-form-item label="正确描述" prop="platformName">
            <el-input
              v-model="dataForm.platformName"
              placeholder="请输入正确描述"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="错误描述" prop="platformName">
            <el-input
              v-model="dataForm.platformName"
              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";
export default {
  components: {},
  props: [],
  data() {
    return {
      loading: false,
      visible: false,
      isDetail: false,
      dataForm: {
        id: "",
        id: undefined,
        platformName: undefined,
        platformType: undefined,
        questionType: undefined,
        questionClass: undefined,
        questionContent: undefined,
        link: undefined,
        obtainEvidence: [],
        annex: [],
      },
      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" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getplatformTypeOptions();
    this.getquestionTypeOptions();
  },
  mounted() {},
  methods: {
    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.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.dataForm.obtainEvidence) this.dataForm.obtainEvidence = [];
          if (!this.dataForm.annex) this.dataForm.annex = [];
        }
      });
    },
    dataFormSubmit() {
      this.$refs["elForm"].validate(async (valid) => {
        if (valid) {
          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>