antissoft / NetworkInformation

  <template>

    <el-dialog

      :title="!dataForm.id ? '新建' : isDetail ? '详情' : formType ? '案件处理' : '编辑'"

      :close-on-click-modal="false"
      :visible.sync="visible"
      class="NCC-dialog NCC-dialog_center"
      lock-scroll
      width="50%"
      v-loading="loading"

      :modal="false"

    >

      <el-row :gutter="15" class="NCC-dialog-content" v-show="!isDetail">

        <el-form
          ref="elForm"
          :model="dataForm"
          size="small"
          label-width="110px"
          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 />
            </el-form-item>
          </el-col>
          <el-col :span="24">

            <el-form-item label="案件名称" prop="systemName">

  			      <el-select

                ref="select"

   			        v-model="dataForm.systemName"
   			        filterable
   			        remote
   			        reserve-keyword

   			        placeholder="请输入案件名称"
   			        @blur.native.capture="selectBlur"
                @visible-change="visibleNameChange"
                @change="(val) => platformNameChange(val, 'change')"

                :disabled="formType != 0"

   			        :loading="system_loading">

   			        <el-option v-for="item in systemOption" :key="item.value" :label="item.systemName" :value="item.id" />

   			      </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">

            <el-form-item label="运营主体" prop="registeredEntity">
              <el-select
                v-model="dataForm.registeredEntity"
                placeholder="请选择运营主体"
                clearable
                filterable 
                style="width: 100%"

                :disabled="formType != 0 || dataForm.isHaveSystem"

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

              <el-radio-group v-model="dataForm.category" :disabled="formType != 0 || dataForm.isHaveSystem">
                <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">
            <el-form-item label="备案号" prop="recordNumber">

              <el-input v-model="dataForm.recordNumber" placeholder="选择备案号" clearable :disabled="formType == 2"/>

            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="isSHILevel">

            <el-form-item label="所属区县" prop="districtCounty">
                <el-radio-group
                  v-model="dataForm.districtCounty"
                  placeholder="请选择所属区县"
                  style="line-height: 22px"

                  :disabled="formType == 2"

                >
                  <el-radio v-for="v in areaOptions" :key="v.id" :label="v.id">{{
                    v.fullName
                  }}</el-radio>
                </el-radio-group>
              </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="违法原因" prop="illegalReasons">

              <el-input type="textarea" v-model="dataForm.illegalReasons" placeholder="请输入违法原因" clearable maxlength="200" :disabled="formType == 2"/>

            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="处罚要求" prop="punishmentRequirements">

              <el-input type="textarea" v-model="dataForm.punishmentRequirements" placeholder="请输入处罚要求" clearable maxlength="200" :disabled="formType == 2"/>

            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="处罚内容" prop="punishmentContent">

              <el-input type="textarea" v-model="dataForm.punishmentContent" placeholder="请输入处罚内容" clearable maxlength="200" :disabled="formType == 2"/>

            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="isSHILevel">

            <el-form-item label="执法方式" prop="enforceType">
              <el-radio-group v-model="dataForm.enforceType">

                <el-radio label="柔性执法">柔性执法</el-radio>
                <el-radio label="行政执法">行政执法</el-radio>

              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="!isSHILevel && formType == 2">

            <el-form-item label="执法说明" prop="enforcecontent">

              <el-input type="textarea" v-model="dataForm.enforcecontent" placeholder="请输入执法说明" clearable maxlength="200"/>

            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <el-row v-show="!!isDetail">
        <el-col class="form-item">
          <div class="label w-120">案件名称：</div>
          <div class="text">{{ dataForm.systemNameStr || '--' }}</div>
        </el-col>
        <el-col class="form-item">
          <div class="label w-120">运营主体：</div>
          <div class="text">{{ dataForm.registeredEntityStr || '--' }}</div>
        </el-col>
        <el-col class="form-item">
          <div class="label w-120">应用类别：</div>
          <div class="text">{{ dataForm.categoryName || '--' }}</div>
        </el-col>
        <el-col class="form-item">
          <div class="label w-120">备案号：</div>
          <div class="text">{{ dataForm.recordNumber || '--' }}</div>
        </el-col>
        <el-col class="form-item">
          <div class="label w-120">所属区县：</div>
          <div class="text">{{ dataForm.districtCountyName }}</div>
        </el-col>
        <el-col class="form-item">
          <div class="label w-120">违法原因：</div>
          <p class="text">{{ dataForm.illegalReasons || '--' }}</p>
        </el-col>
        <el-col class="form-item">
          <div class="label w-120">处罚要求：</div>
          <p class="text">{{ dataForm.punishmentRequirements || '--' }}</p>
        </el-col>
        <el-col class="form-item">
          <div class="label w-120">处罚内容：</div>
          <p class="text">{{ dataForm.punishmentContent || '--' }}</p>
        </el-col>
        <el-col class="form-item" v-if="dataForm.enforceType">
          <div class="label w-120">执法方式：</div>
          <p class="text">{{ dataForm.enforceType || '--' }}</p>
        </el-col>
        <el-col class="form-item" v-if="dataForm.enforcecontent">
          <div class="label w-120">执法说明：</div>
          <p class="text">{{ dataForm.enforcecontent || '--' }}</p>
        </el-col>

      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>

        <template  v-if="!isDetail">
          <el-button type="primary" v-if="!isDetail && formType == '0'" @click="submit(1)" :loading="btnLoading">{{isSHILevel ? '下 发' : '上 报'}}</el-button>
          <el-button type="info" v-if="!isDetail && formType == '0'" @click="submit(0)" :loading="btnLoading">保 存</el-button>

        </template>

        <template v-if="!isDetail">
          <el-button type="primary" v-if="!isDetail && formType != '0'" @click="handle" :loading="btnLoading">提 交</el-button>

        </template>

      </span>
    </el-dialog>

  </template>
  <script>

  import infoMixin from "@/mixins/info";
  import request from "@/utils/request";
  import { getSystemDetail } from "@/api/baseData/info";

  import { getCompanyInfoList, getCompanyInfoById } from "@/api/baseData/company";

  import { dynamicTextUP } from "@/filters/index";

  export default {
    mixins: [infoMixin],
    data() {
      return {
        visible: false,
        loading: false,
        isDetail: false,

        formType: false, //  0 新增 1 编辑 2 处理

        dataForm: {
  		    id: undefined,
  		    registrationTime: undefined,
  		    systemName: undefined,
  		    registeredEntity: undefined,
  		    category: undefined,
  		    recordNumber: undefined,

          registeredEntityStr: undefined,

  		    districtCounty: undefined,

          systemNameStr: undefined,

  		    illegalReasons: undefined,
  		    punishmentRequirements: undefined,
  		    punishmentContent: undefined,
  		    state: undefined,
  		    record: undefined,
  		    caseHandlingOpinions: undefined,
  		    enforcementRecords: undefined,
  		    noticeLetter: undefined,
  		    punishmentDecision: undefined,
  		    closingReport: undefined,

          enforceType: undefined,

          enforcecontent: undefined,

          isHaveSystem: undefined,

  	    },
        rules: {
          systemName: [

            { required: true, message: "请选择应用名称", trigger: "bulr" }
          ],
          registeredEntity: [
            { required: true, message: "请选择运营主体", trigger: "bulr" }

          ],
          districtCounty: [
            { required: true, message: "请选择所属区域", trigger: "change" }
          ],

          enforceType: [

            { required: true, message: "请选择执法方式", trigger: "bulr" }

          ],

          enforcecontent: [

            { required: true, message: "请填写执法说明", trigger: "bulr" }
          ],

        },
        systemOption: [],
        system_loading: false,
        areaOptions: [],

        btnLoading: false,

        companyOptions: [],
        platformTypeOptions: [],

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

      this.getplatformTypeOptions();

      this.getSystemSelect();
      this.initSystemTypeList();
      this.initAreaTypeList();

      this.initCompanyList();

    },
    mounted() {},
    methods: {

      async getplatformTypeOptions() {
        let list = this.$store.state.meta.system;
        !list && (list = await this.$store.dispatch("getTypeListByCode", "system"));
        this.platformTypeOptions = list;
      },

        // 请求公司列表
      async initCompanyList() {
        request({
          url: `/Extend/basecomapnyinfo/GetNoPagingList`,
          method: "GET",
        }).then(({data}) => {
          this.companyOptions = data;
        })
      },

      // 获取系统列表

      getSystemSelect() {

        this.system_loading = true;
        request({
          url: "/Extend/basesysteminfo/GetNoPagingList",
          method: "get",

        }).then(({data}) => {
          this.systemOption = data;
          this.system_loading = false;
        })
      },

      selectBlur(e) {
        if(!this.isSHILevel) return;
        let value = e.target.value;
        if(!value) return;
        this.dataForm.systemName = e.target.value;
        this.platformNameChange(value, 'blur');
      },
      platformNameChange(val, type) {
        let obj = this.systemOption.find(v => type == 'blur' ? val == v.fullName : val == v.id);
        this.dataForm.isHaveSystem = obj ? true : false;

        this.dataForm.systemName = obj ? obj.id : val;

        this.dataForm.registeredEntity = obj ? obj.companyId : '';
        this.dataForm.category = obj ? this.platformTypeOptions.find(v => v.Id == obj.systemType || v.FullName == obj.systemType).Id : '';
        // this.dataForm.recordNumber = obj ? obj.platform : '';

      },

      // 系统名称改变
      systemChange(val) {
        getSystemDetail(val).then(({data}) => {
          this.dataForm.registeredEntity = data.companyId;
          this.dataForm.category = dynamicTextUP(data.systemType, this.systemTypeOptions);
          this.dataForm.recordNumber = data.specialRecordNumber || '--';
          this.dataForm.districtCounty = data.areaId;
        })
      },

      visibleNameChange(val) {
        if (val) return
        let input = this.$refs.select.$children[0].$refs.input;
        input.blur();
      },

      goBack() {
        this.$emit("refresh");
      },

      init(id, isDetail, type) {
        // type 0 上报/下派 1 处理

        this.formType = type || '0';
        this.dataForm.id = id || undefined;

        this.isDetail = isDetail || false;

        this.visible = true;

        this.$nextTick(() => {

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

          if (this.dataForm.id) {

            this.loading = true;

            request({
              url: `/Extend/BaseCaseHandling/${this.dataForm.id}`,
              method: "GET",

            }).then(async (res) => {

              res.data.districtCountyName = this.areaOptions.find(item => item.id == res.data.districtCounty).fullName;
              res.data.categoryName = this.platformTypeOptions.find(v => v.Id == res.data.category || v.FullName == res.data.category).FullName;

              this.dataForm = res.data;

              this.loading = false;

            }).catch(() => {
              this.loading = false;

            });
          }
        });
      },

      // 上报/下派

      submit(type) {
        // type: 1 上报 0 保存
        let obj = {
          ...this.dataForm,
          isReport: type,
        }
  			this.$refs['elForm'].validate((valid) => {

          if(valid) {

            !this.dataForm.id ? this.toRequest('/Extend/BaseCaseHandling', 'POST', obj) : this.toRequest(`/Extend/BaseCaseHandling/${this.dataForm.id}`, 'PUT', obj);
          }
        })
      },
      // 处理
      handle() {
        this.$refs['elForm'].validate((valid) => {
          if(valid) {

            this.btnLoading = true;

            let { enforceType, enforcecontent } = this.dataForm;

            request({

              url: `/Extend/basecasehandling/HandlingCase/${this.dataForm.id}`,
              method: "POST",
              data: { enforceType, enforcecontent },

            }).then((res) => {

              this.visible = false;
              this.$emit("refresh", true);

              this.$message({
                type: "success",

                message: res.msg,

              })
            }).catch(() => {
              this.btnLoading = false;
            })

          }
        })

      },
      toRequest(url, method, data) {
        this.btnLoading = true;
        request({
          url,
          method,
          data,
        }).then((res) => {
          this.$message({
            type: "success",
            message: res.msg,
            onClose: () => {
              this.visible = false;
              this.$emit("refresh", true);
            },
          });
        }).catch(() => {
          this.btnLoading = false;
        });

      }
    },
  };
  </script>