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 w-120">问题来源：</div>

          <div class="text">{{ sourceOptions.find(v => v.Id == dataForm.reportSource).FullName || '--' }}</div>

        </el-col>
        <el-col class="form-item">

          <div class="label w-120">应用名称：</div>

          <div class="text">{{ dataForm.platformNameStr || '--' }}</div>

        </el-col>
        <el-col class="form-item">

          <div class="label w-120">运营主体：</div>

          <div class="text">{{ dataForm.companyStr || '--' }}</div>

        </el-col>
        <el-col class="form-item">

          <div class="label w-120">应用类型：</div>

          <div class="text">{{ dataForm.platformTypeStr || '--' }}</div>

        </el-col>

        <el-col class="form-item" v-if="dataForm.platformType == '580634746028033285'">

          <div class="label w-120">归属平台：</div>

          <div class="text">{{ dataForm.selfMediaPlatformType || '--' }}</div>
        </el-col>
        <el-col class="form-item">

          <div class="label w-120">问题类型：</div>

          <div class="text">{{ dataForm.questionType || '--' }}</div>
        </el-col>
        <el-col class="form-item" v-show="dataForm.questionType == '错误表述'">

          <div class="label w-120">正确描述：</div>

          <div class="text">{{ dataForm.accurateDescription || '--' }}</div>
        </el-col>
        <el-col class="form-item" v-show="dataForm.questionType == '错误表述'">

          <div class="label w-120">错误描述：</div>

          <div class="text">{{ dataForm.incorrectDescription || '--' }}</div>
        </el-col>
        <el-col class="form-item">

          <div class="label w-120">问题内容：</div>

          <div class="text">{{ dataForm.questionContent || '--' }}</div>
        </el-col>
        <el-col class="form-item">

          <div class="label w-120">关键词：</div>

          <div class="text">{{ dataForm.questionClass || '--' }}</div>
        </el-col>
        <el-col class="form-item">

          <div class="label w-120">附件：</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>