src/views/baseSystemInfo/InspectForm.vue

<template>
  <el-dialog
    title="上报"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="NCC-dialog NCC-dialog_center"
    lock-scroll
    width="60%"
  >
    <el-row :gutter="15" class="NCC-dialog-content" v-loading="form_loading">
      <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :rules="rules">
        <el-col :span="24">
          <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>
              <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
            >
              <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="24">
          <el-form-item label="应用类型" prop="platformType">
            <el-radio-group v-model="dataForm.platformType" disabled>
              <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'">
          <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="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>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确 定</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"
export default {
  components: {},
  props: [],
  data() {
    return {
      loading: false,
      visible: false,
      name_loading: false,
      isDetail: false,
      form_loading: true,
      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: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async initAllList() {
      let companyRes = await request({
        url: `/Extend/basecomapnyinfo/GetNoPagingList`,
        method: "GET",
      });
      this.companyOptions = companyRes.data;
      let SourceRes = await request({
        url: `/Extend/baseinspectionreport/GetReportSourceList`,
        method: "GET",
      });
      this.sourceOptions = SourceRes.data;
      let list = this.$store.state.meta.system;
      !list && (list = await this.$store.dispatch("getTypeListByCode", "system"));
      this.platformTypeOptions = list;
      await getDictionaryDataSelector("577006814432855301").then((res) => {
        this.questionTypeOptions = [...res.data.list, {Id: '0', fullName: '其他'}];
      });
      this.name_loading = true
      await request({
        url: `/Extend/basesysteminfo/GetNoPagingList`,
        method: "GET",
      }).then(({data}) => {
        if(!data) return;
        this.nameOptions = data;
        this.name_loading = false;
      });
    },
    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);
      this.dataForm.platformName = obj ? obj.id : val;
      this.dataForm.company = obj ? this.companyOptions.find(v => v.id == obj.companyId || v.companyName == obj.companyId).id : '';
      this.dataForm.platformType = obj ? this.platformTypeOptions.find(v => v.Id == obj.systemType || v.FullName == obj.systemType).Id : '';
      if(obj && obj.selfMediaPlatformType && this.dataForm.platformType == '580634746028033285') {
        if(this.mediaPlatList.findIndex(j => j == obj.selfMediaPlatformType) == -1) {
          this.dataForm.selfMediaPlatformType = '其他';
          this.dataForm.selfMediaPlatformTypeOther = obj.selfMediaPlatformType;
        } else {
          this.dataForm.selfMediaPlatformType = obj.selfMediaPlatformType;
        }
      }
    },
    visibleNameChange(val) {
      if (val) return
      let input = this.$refs.select.$children[0].$refs.input;
      input.blur();
    },
    async loadList() {
      this.name_loading = true;
      request({
        url: `/Extend/basesysteminfo/GetNoPagingList`,
        method: "GET",
      }).then(({data}) => {
        if(!data) return;
        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() {
      let { data } = await request({
        url: `/Extend/baseinspectionreport/GetReportSourceList`,
        method: "GET",
      });
      this.sourceOptions = data;
    },
    async getquestionTypeOptions() {
      getDictionaryDataSelector("577006814432855301").then((res) => {
        this.questionTypeOptions = [...res.data.list, {Id: '0', fullName: '其他'}];
      });
    },
    goBack() {
      this.$emit("refresh");
    },
    async init(row) {
      this.dataForm.id = '';
      this.visible = true;
      this.isDetail = false;
      this.form_loading = true;
      await this.initAllList();
      this.$nextTick(async () => {
        this.$refs["elForm"].resetFields();
        this.platformNameChange(row.id);
        this.form_loading = false;
      });
    },
    dataFormSubmit() {
      this.$refs["elForm"].validate(async (valid) => {
        if (valid) {
          console.log(this.dataForm);
          let obj = {
            ...this.dataForm,
            questionType: this.dataForm.questionType == '其他' ? this.dataForm.otherQuestionType : this.dataForm.questionType,
            selfMediaPlatformType: this.dataForm.selfMediaPlatformType == '其他' ? this.dataForm.selfMediaPlatformTypeOther : this.dataForm.selfMediaPlatformType,
          }
          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>