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-if="!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"
 			        :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 || 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-input v-model="dataForm.category" placeholder="选择系统类别" clearable :disabled="formType || dataForm.isHaveSystem"/>
          </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 || dataForm.isHaveSystem"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属区县" prop="districtCounty">
              <el-radio-group
                v-model="dataForm.districtCounty"
                placeholder="请选择所属区县"
                style="line-height: 22px"
                :disabled="formType"
              >
                <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"/>
          </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"/>
          </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"/>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="(formType && isSHILevel) || dataForm.state == '592592999649641733'">
          <el-form-item label="执法方式" prop="enforceType">
            <el-radio-group v-model="dataForm.enforceType">
              <el-radio :label="'1'">柔性执法</el-radio>
              <el-radio :label="'2'">行政执法</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="formType || dataForm.state == '592592999649641733'">
          <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-if="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.category || '--' }}</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">{{ areaOptions.find(item => item.id == dataForm.districtCounty).fullName }}</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-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <template  v-if="!isDetail && !formType">
        <el-button type="primary" v-if="!isDetail" @click="submit(1)" :loading="btnLoading">{{isSHILevel ? '下 发' : '上 报'}}</el-button>
        <el-button type="info" v-if="!isDetail" @click="submit(0)" :loading="btnLoading">保 存</el-button>
      </template>
      <template v-if="!isDetail && formType">
        <el-button type="primary" v-if="!isDetail" @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,
      dataForm: {
		    id: undefined,
		    registrationTime: undefined,
		    systemName: undefined,
		    registeredEntity: undefined,
		    category: undefined,
		    recordNumber: undefined,
		    districtCounty: 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: []
    };
  },
  computed: {
    isSHILevel() {
      // 判断角色是否为‘市级办公室’
      return this.$store.state.user.islader;
    },
  },
  watch: {},
  created() {
    this.getSystemSelect();
    this.initSystemTypeList();
    this.initAreaTypeList();
    this.initCompanyList();
  },
  mounted() {},
  methods: {
      // 请求公司列表
    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;
      if(!obj) return;
      this.dataForm.systemName = obj ? obj.id : val;
      this.dataForm.registeredEntity = obj ? obj.companyId : val;
      this.dataForm.category = obj ? obj.systemType : '';
      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 = Boolean(type) || false;
      this.dataForm.id = id || 0;
      this.isDetail = isDetail || false;
      this.visible = true;
      this.$forceUpdate();
      this.$nextTick(() => {
        !isDetail && this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: `/Extend/BaseCaseHandling/${this.dataForm.id}`,
            method: "GET",
          }).then(async (res) => {
            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>