antissoft / NetworkInformation

  <template>

    <el-dialog

      :title="!dataForm.id ? '新增' : isDetail ? '详情' : '编辑'"

      :close-on-click-modal="false"
      :visible.sync="visible"

      class="NCC-dialog NCC-dialog_center dialog-box baseInspectionReportForm"

      lock-scroll

      width="50%"

      :modal="false"

    >

      <el-row v-loading="form_loading">
        <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="24" 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="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="24">

            <el-form-item label="运营主体" prop="company">
              <el-select

                ref="companySelect"

                v-model="dataForm.company"
                placeholder="请选择运营主体"
                clearable
                filterable 
                style="width: 100%"

                @blur.native.capture="selectCompanyBlur"
                @visible-change="visibleNameCompanyChange"

                @change="(val) => companyChange(val, 'change')"
                :disabled='!!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="24">

            <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 || !dataForm.company">
                <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="24">

            <el-form-item label="应用类型" prop="platformType">

              <el-radio-group v-model="dataForm.platformType" :disabled='!!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="24" 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="24" 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="24">

            <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="24" 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="24" 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="24" 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="24">

            <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="24">

            <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="24">

            <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="24" v-if="isSHILevel">
            <el-form-item label="处置建议" prop="judgmentOpinions">
              <el-input
                v-model="dataForm.judgmentOpinions"
                placeholder="请输入处置建议"
                show-word-limit
                :style="{ width: '100%' }"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                maxlength="200"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="!isSHILevel">
            <el-form-item label="处置结果" prop="disposalSuggestions">
              <el-input
                v-model="dataForm.disposalSuggestions"
                placeholder="请输入处置结果"
                show-word-limit
                :style="{ width: '100%' }"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                maxlength="200"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">

            <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">{{ dataForm.reportSourceName || '--' }}</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.link || '--' }}</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>

          <div class="text" style="width: calc(100% - 120px);">
            <NCC-UploadFz v-model="dataForm.annex" :fileSize="5" sizeUnit="MB" :limit="9" buttonText="点击上传" disabled/>
          </div>

        </el-col>

        <el-col class="form-item" v-if="dataForm.judgmentOpinions">

          <div class="label w-120">处置建议：</div>

          <div class="text">{{ dataForm.judgmentOpinions || '--' }}</div>
        </el-col>
        <el-col class="form-item" v-if="dataForm.disposalSuggestions">

          <div class="label w-120">处置结果：</div>

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

        </el-row>

      </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,

        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,

          reportSourceName: undefined,

          judgmentOpinions: undefined,
          disposalSuggestions: 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;

      },
      isSHILevel() {
        // 判断角色是否为‘市级办公室’
        return this.$store.state.user.islader;
      },

    },

    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
        // 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.platformType = obj ? this.platformTypeOptions.find(v => v.Id == obj.systemType || v.FullName == obj.systemType).Id : '';
        if(obj && 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();
      },

  
      // 运营主体改变
      selectCompanyBlur(e) {
        let value = e.target.value;
        if(!value) return;
        this.dataForm.company = e.target.value;
      },

      async companyChange(val, type) {
        let obj = this.companyOptions.find(v => val == v.id);
        obj && await request({
          url: `/Extend/basesysteminfo/GetNoPagingList`,
          method: "GET",

          params: { companyId: val }

        }).then(({data}) => {
          if(!data) return;
          this.nameOptions = data;
        });
        !obj && this.nameOptions == [];
        this.dataForm.platformName = '';
        this.dataForm.platformType = '';
      },

      visibleNameCompanyChange(val) {
        if (val) return
        let input = this.$refs.companySelect.$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() {

        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(id, isDetail) {

        this.dataForm.id = id || '';

        this.visible = true;

        this.isDetail = isDetail || false;

        this.form_loading = true;

        await this.initAllList();

        this.$nextTick(async () => {

          !isDetail && this.$refs["elForm"].resetFields();

          if (this.dataForm.id) {

            this.form_loading = true;

            let res = await getDetail(this.dataForm.id);

            if(res.code != 200) return this.form_loading = false;

            if(!res.data) return;

            this.dataForm = res.data;

            this.sourceOptions.length && this.dataForm.reportSource && (this.dataForm.reportSourceName = this.sourceOptions.find(v => v.Id == this.dataForm.reportSource).FullName);

            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 || '--';

            this.form_loading = false;
          } else {
            this.form_loading = false;

          }
        });
      },

      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.selfMediaPlatformType,

            }

            this.btnLoading = true;

            try {
              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);
                },
              });
            } catch (error) {
              this.btnLoading = false;
            }

          }
        });
      },
    },
  };

  </script>

  <style lang="scss" scoped>
  .baseInspectionReportForm {
    :deep(.el-radio) {
      margin: 0 30px 8px 0;
    }
  }
  </style>