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

        <div style="color: #66b1ff;">{{ dataForm.disteport }}</div>

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

                v-selectLoadMore="initCompanyList"
                :loading="name_loading"
                :teleported="false"
                :filter-method="filterMethod"

              >

                <el-option v-for="item in companyOptions.slice(0, company_currentPage)" :key="item.id" :label="item.companyName" :value="item.id"/>

              </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')"

                 v-selectLoadMore="moreSystemList"
                :teleported="false"
                :loading="system_loading"

                :disabled="!!this.dataForm.id || !dataForm.company">

                <el-option v-for="item in nameOptions.slice(0, system_currentPage)" :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>

          <!-- 办公地址address、联系人contactUser、联系电话contactPhone -->
          <el-col :span="24">
            <el-form-item label="办公地址" prop="address">
              <el-input v-model="dataForm.address" placeholder="请输入办公地址" clearable :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系人" prop="contactUser">
              <el-input v-model="dataForm.contactUser" placeholder="请输入联系人" clearable :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input v-model="dataForm.contactPhone" placeholder="请输入联系电话" clearable :style="{ width: '100%' }"></el-input>
            </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">
          <div class="label w-120">办公地址：</div>
          <div class="text">{{ dataForm.address || '--' }}</div>
        </el-col>
        <el-col class="form-item">
          <div class="label w-120">联系人：</div>
          <div class="text">{{ dataForm.contactUser || '--' }}</div>
        </el-col>
        <el-col class="form-item">
          <div class="label w-120">联系电话：</div>
          <div class="text">{{ dataForm.contactPhone || '--' }}</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">
          <div class="label w-120">研判类型：</div>
          <div class="text">{{ dataForm.state || "--" }}</div>
        </el-col>
        <el-col class="form-item">
          <div class="label w-120">所属区域：</div>
          <div class="text">{{ dataForm.areaName || "--" }}</div>
        </el-col>
        <el-col class="form-item" v-if="dataForm.externalAssistanceId">
          <div class="label w-120">所属外协：</div>
          <div class="text">外协一</div>
        </el-col>

        <el-col v-for="(v, i) in dataForm.judgmentOpinions" :key="i" style="border: #f6f6f6 solid 1px; border-radius: 10px; padding: 8px; margin-bottom: 5px;">
          <div class="title">研判信息{{ i + 1 }}</div>
          <div class="form-item">
            <div class="label w-120">处置类型：</div>
            <div class="text">{{ v.State }}</div>
          </div>
          <div class="form-item">
            <div class="label w-120">处置建议：</div>
            <div class="text">{{ v.judgmentOpinion }}</div>
          </div>

        </el-col>

        <el-col v-for="(v, i) in dataForm.disposalSuggestions" :key="i" style="border: #f6f6f6 solid 1px; border-radius: 10px; padding: 8px; margin-bottom: 5px;">
          <div class="title">处置信息{{ i + 1 }}</div>
          <div class="form-item">
            <div class="label w-120">处置结果：</div>
            <div class="text">{{ v.disposalSuggestion }}</div>
          </div>
          <div class="form-item" v-if="v.fileUrl">
            <div class="label w-120">处置附件：</div>
            <div class="text" style="width: calc(100% - 120px);">
              <NCC-UploadFz v-model="v.fileUrl" :fileSize="5" sizeUnit="MB" :limit="9" buttonText="点击上传" disabled/>
            </div>

          </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 { dynamicText } from "@/filters/index";
  import infoMixin from "@/mixins/info";

  import { MediaPlatList } from "@/assets/data"

  import { getInfoList } from "@/api/baseData/info";

  export default {
    components: {},

    mixins: [infoMixin], 

    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,

          address: undefined,
          contactUser: undefined,
          contactPhone: undefined,
          disteport: 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" },

          ],

          disposalSuggestions: [
            { required: true, message: "请填写处置结果", trigger: "blur" },
          ],

          contactPhone: [
  					{
  						pattern: /^1[3456789]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
  						message: '请输入正确的联系电话',
  						trigger: 'blur'
  					},
  				],

          // otherQuestionType: [
          //   { required: true, message: "请输入其他问题类型", trigger: "blur" },
          // ],

        },

        sourceOptions: [],

        platformTypeOptions: [],
        questionTypeOptions: [],

        nameOptions: [], // 应用名称

        mediaPlatList: MediaPlatList,

        companyOptions: [],
        btnLoading: false,

        areaOptions: [],

        company_currentPage: 20,
        system_loading: false,
        system_currentPage: 20,
        system_loading: 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() {

        if(this.company_currentPage > this.companyOptions.length) return;
        this.company_currentPage += 10;
      },
      async filterMethod(val) {
        this.company_currentPage = 20;
        this.name_loading = true
        let companyRes = await request({

          url: `/Extend/basecomapnyinfo/GetNoPagingList`,
          method: "GET",

          params: {
            companyName: val
          }
        });
        this.companyOptions = companyRes.data;
        this.name_loading = false;

      },

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

        this.dataForm.address = obj ? obj.address : '';
        this.dataForm.contactUser = obj ? obj.contactUser : '';
        this.dataForm.contactPhone = obj ? obj.contactPhone : '';

        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;

        this.companyChange(value, 'blur');

      },

      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;
        });

        if(!type) return;

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

        })

      },

      moreSystemList() {
        if(this.system_currentPage > this.nameOptions.length) return;
        this.system_currentPage += 10;
      },

      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.initAreaTypeList();

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

            await this.companyChange(res.data.company, false);

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

            if(!res.data) return;

            this.dataForm = res.data;

            if(!this.isDetail && Array.isArray(this.dataForm.disposalSuggestions)) {

              let disposalSuggestions = this.dataForm.disposalSuggestions;
              this.dataForm.disposalSuggestions = disposalSuggestions[disposalSuggestions.length - 1].disposalSuggestion;
            }

            res.data.areaId && (this.dataForm.areaName = dynamicText(res.data.areaId, this.areaOptions));

            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,

              disposalSuggestions: [
                {
                  disposalSuggestion: this.dataForm.disposalSuggestions,
                  fileUrl: '',
                }
              ],
            };
            this.isSHILevel && delete obj.disposalSuggestions;

            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>