src/views/baseCaseHandling/Form.vue

<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"
  >
    <el-row :gutter="15" class="NCC-dialog-content">
      <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
 			        v-model="dataForm.systemName"
 			        filterable
 			        remote
 			        reserve-keyword
 			        placeholder="请输入关键词"
 			        :remote-method="getSystemSelect"
               @change="systemChange"
              :disabled="formType"
 			        :loading="system_loading">
 			        <el-option
 			          v-for="item in systemOption"
 			          :key="item.value"
 			          :label="item.systemName"
 			          :value="item.id">
 			        </el-option>
 			      </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="注册主体" prop="registeredEntity">
            <el-input v-model="dataForm.registeredEntity" placeholder="选择系统自动带出" clearable disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="系统类别" prop="category">
            <el-input v-model="dataForm.category" placeholder="选择系统自动带出" clearable disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备案号" prop="recordNumber">
            <el-input v-model="dataForm.recordNumber" placeholder="选择系统自动带出" clearable disabled/>
          </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>
    <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 { 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,
	    },
      rules: {
        systemName: [
          { required: true, message: "请选择系统名称", trigger: "change" }
        ],
        districtCounty: [
          { required: true, message: "请选择所属区域", trigger: "change" }
        ],
        enforceType: [
          { required: true, message: "请选择执法方式", trigger: "change" }
        ],
        enforcecontent: [
          { required: true, message: "请填写执法说明", trigger: "bulr" }
        ],
      },
      systemOption: [],
      system_loading: false,
      areaOptions: [],
      btnLoading: false,
    };
  },
  computed: {
    isSHILevel() {
      // 判断角色是否为‘市级办公室’
      return this.$store.state.user.islader;
    },
  },
  watch: {},
  created() {
    this.getSystemSelect();
    this.initSystemTypeList();
    this.initAreaTypeList();
  },
  mounted() {},
  methods: {
    // 获取系统列表
    getSystemSelect(val) {
      let query = {
        SystemName: val || "",
      };
      this.system_loading = true;
      request({
        url: "/Extend/basesysteminfo/GetNoPagingList",
        method: "get",
        params: query,
      }).then(({data}) => {
        this.systemOption = data;
        this.system_loading = false;
      })
    },
    // 系统名称改变
    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;
      })
    },
    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.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: `/Extend/BaseCaseHandling/${this.dataForm.id}`,
            method: "GET",
          }).then((res) => {
            this.dataForm = res.data;
            this.loading = false;
            this.$nextTick(() => {
              this.$refs["elForm"].clearValidate();
            })
          }).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>