zhzf/client/src/views/xzzfgl/zfja.vue

<template>
  <browser :component-loading="componentLoading"
           :api-config="apiConfig"
           :table-config="tableConfig"
           :permissions="permissions"
           :dialog-config="dialogConfig"
           :actions="actions"
           :default-query-params="queryParams"
           :custom-query="true"
           @custom-query="handleQuery"
           @update:dialog-config="dialogConfig = $event"
           @update:actions="actions = $event">
    <template #queryPanel="{ queryParams: query }">

      <el-form ref="queryForm" :model="query" label-width="80px">
        <el-row class="query-condition">
          <el-col :span="6">
            <el-form-item label="案件名称" prop="caseName">
              <el-input v-model="query.caseName" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="立案日期" prop="fillingDate">
              <el-date-picker
                  v-model="query.fillingDate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="当前节点" prop="status">
              <el-select v-model="query.status" placeholder="请选择" clearable>
                <el-option
                    v-for="item in DICTITEMS.ZFJD_OPTIONS.filter(o => o.value !== 'plan_approval' &&
                    o.value !== 'plan_approval_failed' &&
                    o.value !== 'plan_approved' &&
                    o.value !== 'inspect_done' &&
                    o.value !== 'filed' &&
                    o.value !== 'investigating' &&
                    o.value !== 'investigation_done' &&
                    o.value !== 'analyze_judge' &&
                    o.value !== 'inform' &&
                    o.value !== 'hearing' &&
                    o.value !== 'decided' &&
                    o.value !== 'closed')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>

    <el-table-column label="案件号" prop="caseNum" min-width="200"/>
    <el-table-column label="案件名称" prop="caseName" min-width="350"/>
    <el-table-column label="立案日期" prop="fillingDate" min-width="150"/>
    <el-table-column label="当前节点" prop="enforcementInfo.currentNode" min-width="150"/>
    <el-table-column label="立案人" prop="filedUserName" min-width="150"/>

    <template #tableControlColumn="{ data: r }">
      <el-link type="primary" @click="handleCloseCase(r.data.row)" v-if="r.data.row.enforcementInfo.currentNodeCode === 'execute'" title="结案">结案</el-link>
      <el-link type="primary" @click="handleDetail(r.data.row)" v-if="r.data.row.enforcementInfo.currentNodeCode !== 'execute'" title="详情">详情</el-link>
    </template>

    <template #dialog>
      <el-dialog class="business-dialog"
                 v-model="dialogConfig.show"
                 :show-close="false"
                 :append-to-body="true"
                 :top="'100px'"
                 :width="'1292px'">
        <template #header>
          <div class="cvi-dialog-header">
            <div class="cvi-dialog-header-title">
              <div class="dialog-line"></div>
              {{ dialogConfig.title }}
            </div>
            <i class="iconfont icon-zyyy_tcgb" @click="dialogConfig.actions.handleClose"></i>
          </div>
        </template>

        <el-form class="browser-businesss-table-dialog-form"
                 label-width="130px"
                 :model="dialogConfig.data"
                 :rules="dialogConfig.rules"
                 ref="formRef">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="当事人信息" name="1">
              <el-row class="width-100">
                <el-col :span="8">
                  <el-form-item label="执法机构" prop="agencyName">
                    <el-input v-model="dialogConfig.data.agency.agencyName" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="企业名称" prop="unitName">
                    <el-input v-model="dialogConfig.data.enterprise.unitName" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="统一信用代码" prop="unifiedSocialCode">
                    <el-input v-model="dialogConfig.data.enterprise.unifiedSocialCode" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="注册地址" prop="detailedAddress">
                    <el-input v-model="dialogConfig.data.enterprise.detailedAddress" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="经营地址" prop="opLocAddress">
                    <el-input v-model="dialogConfig.data.enterprise.opLocAddress" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="邮编" prop="postalCode">
                    <el-input v-model="dialogConfig.data.enterprise.postalCode" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="单位联系电话" prop="contactPhone">
                    <el-input v-model="dialogConfig.data.enterprise.contactPhone" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="法人姓名" prop="legalRepresentative">
                    <el-input v-model="dialogConfig.data.enterprise.legalRepresentative" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="法人联系电话" prop="legalPhone">
                    <el-input v-model="dialogConfig.data.enterprise.legalPhone" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="证件类型" prop="detailedAddress">
                    <el-input v-model="dialogConfig.data.enterprise.legalPersonIdType" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="证件号码" prop="legalPersonIdNumber">
                    <el-input v-model="dialogConfig.data.enterprise.legalPersonIdNumber" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="职务" prop="legalDuty">
                    <el-input v-model="dialogConfig.data.enterprise.legalDuty" readonly/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-collapse-item>
            <el-collapse-item title="案件信息" name="2">
              <el-row class="width-100">
                <el-col :span="12">
                  <el-form-item label="承办机构" prop="agencyName">
                    <el-input v-model="dialogConfig.data.caseInfo.agency.agencyName" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="案件来源" prop="caseSourceCode">
                    <el-select v-model="dialogConfig.data.caseInfo.caseSourceCode" placeholder="请选择" disabled>
                      <el-option v-for="item in DICTITEMS.AJLY_OPTIONS" :key="item.value" :label="item.label"
                                 :value="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="案件名称" prop="caseName">
                    <el-input v-model="dialogConfig.data.caseInfo.caseName" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="案件号" prop="caseNum">
                    <el-input v-model="dialogConfig.data.caseInfo.caseNum" readonly/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="案由" prop="caseCause">
                    <el-select v-model="dialogConfig.data.caseCause" placeholder="请选择" disabled>
                      <el-option v-for="item in DICTITEMS.AJAY_OPTIONS" :key="item.value" :label="item.label"
                                 :value="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="立案时间" prop="fillingDate">
                    <el-input v-model="dialogConfig.data.caseInfo.fillingDate" readonly/>
                  </el-form-item>
                </el-col>
                <!--                <el-col :span="12">-->
                <!--                  <el-form-item label="案发地点" prop="caseAdd">-->
                <!--                    <el-input v-model="dialogConfig.data.caseInfo.caseAdd" readonly/>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <!--                <el-col :span="12">-->
                <!--                  <el-form-item label="案发时间" prop="caseTime">-->
                <!--                    <el-date-picker v-model="dialogConfig.data.caseInfo.caseTime"-->
                <!--                                    type="datetime"-->
                <!--                                    format="YYYY-MM-DD HH:mm:ss"-->
                <!--                                    value-format="YYYY-MM-DD HH:mm:ss"-->
                <!--                                    disabled/>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <!--                <el-col :span="12">-->
                <!--                  <el-form-item label="立案人" prop="filedUserName">-->
                <!--                    <el-input v-model="dialogConfig.data.caseInfo.filedUserName" readonly/>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <!--                <el-col :span="12">-->
                <!--                  <el-form-item label="是否有违法记录" prop="isLawBreak">-->
                <!--                    <el-select v-model="dialogConfig.data.caseInfo.isLawBreak" placeholder="请选择" disabled>-->
                <!--                      <el-option v-for="item in DICTITEMS.AJLY_OPTIONS" :key="item.value" :label="item.label"-->
                <!--                                 :value="item.value"/>-->
                <!--                    </el-select>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <!--                <el-col :span="24">-->
                <!--                  <el-form-item label="案件简要情况" prop="caseDesc">-->
                <!--                    <el-input type="textarea" :rows="5" v-model="dialogConfig.data.caseInfo.caseDesc" readonly/>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
              </el-row>
            </el-collapse-item>
            <el-collapse-item title="执法人员" name="3">
              <el-row class="width-100">
                <el-col :span="24" class="padding-bottom-10">
                  <el-table :data="dialogConfig.data.officerList" height="260" border>
                    <el-table-column header-align="center" align="center" label="主办人" prop="officerName" min-width="250"/>
                    <el-table-column header-align="center" align="center" label="执法证号" prop="certificateNo" min-width="250"/>
                  </el-table>
                </el-col>
              </el-row>
            </el-collapse-item>
<!--            <el-collapse-item title="检查事项" name="4">-->
<!--              <el-row class="width-100">-->
<!--                <el-col :span="24" class="padding-bottom-10">-->
<!--                  <el-table :data="dialogConfig.data.checkItems" height="300" border>-->
<!--                    <el-table-column header-align="center" align="center" label="检查事项" prop="itemName" min-width="250"/>-->
<!--                    <el-table-column header-align="center" align="center" label="执法依据" prop="enforcementBasis"-->
<!--                                     min-width="250"/>-->
<!--                    <el-table-column header-align="center" align="center" label="处罚依据" prop="punishmentBasis"-->
<!--                                     min-width="250"/>-->
<!--                  </el-table>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </el-collapse-item>-->
            <el-collapse-item title="结案" name="4">
              <el-row class="width-100" v-if="dialogConfig.mode === 'closeCase'">
                <el-col :span="8">
                  <el-form-item label="结案类型" prop="caseCloseType">
                    <el-select v-model="dialogConfig.data.caseInfo.finalCase.caseCloseType" placeholder="请选择">
                      <el-option v-for="item in DICTITEMS.AJJALX_OPTIONS" :key="item.value" :label="item.label"
                                 :value="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="复议情况" prop="reviewSituation">
                    <el-select v-model="dialogConfig.data.caseInfo.finalCase.reviewSituation" placeholder="请选择">
                      <el-option v-for="item in DICTITEMS.YW_OPTIONS" :key="item.value" :label="item.label"
                                 :value="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="诉讼情况" prop="litigationSituation">
                    <el-select v-model="dialogConfig.data.caseInfo.finalCase.litigationSituation" placeholder="请选择">
                      <el-option v-for="item in DICTITEMS.YW_OPTIONS" :key="item.value" :label="item.label"
                                 :value="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="width-100" v-if="dialogConfig.mode === 'detail'">
                <el-col :span="8">
                  <el-form-item label="结案类型">
                    <el-select v-model="dialogConfig.data.caseInfo.finalCase.caseCloseType" placeholder="请选择" disabled>
                      <el-option v-for="item in DICTITEMS.AJJALX_OPTIONS" :key="item.value" :label="item.label"
                                 :value="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="复议情况">
                    <el-select v-model="dialogConfig.data.caseInfo.finalCase.reviewSituation" placeholder="请选择" disabled>
                      <el-option v-for="item in DICTITEMS.YW_OPTIONS" :key="item.value" :label="item.label"
                                 :value="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="诉讼情况">
                    <el-select v-model="dialogConfig.data.caseInfo.finalCase.litigationSituation" placeholder="请选择" disabled>
                      <el-option v-for="item in DICTITEMS.YW_OPTIONS" :key="item.value" :label="item.label"
                                 :value="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-form>

        <template #footer>
          <div class="cvi-dialog-footer">
            <el-button @click="dialogConfig.actions.handleClose">取消</el-button>
            <el-button type="primary" @click="dialogConfig.actions.handleDialogOk">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </template>

  </browser>
</template>
<script setup>
import browser from '@/components/Browser.vue'
import MultipleFile from '@pages/common/MultipleFile.vue'
import moment from 'moment'
import {DICTITEMS} from '@/utils/Constants.js'
import {reactive, toRefs, ref} from 'vue'
import caseApi from '@/api/lawenforcement/Case'
import messagesApi from '@/api/lawenforcement/Message.js'
import enforcementInfo from '@/api/lawenforcement/EnforcementInfo'
import {ElMessage} from 'element-plus'

const state = reactive({
  componentLoading: false,
  queryParams: {
    status: 'execute',
  },
  permissions: {
    query: true,
    add: false,
    modify: false,
    detail: false,
    delete: false,
    importFile: false,
    exportFile: false,
    exportSelectFile: false,
    downloadTemp: false,
  },
  tableConfig: {
    hasControlColumn: true,
    multipleSelect: false,
    controlWidth: '120'
  },
  apiConfig: {
    api: caseApi,
    api2: enforcementInfo,
    modelId: 'caseId'
  },
  dialogConfig: {
    show: false,
    mode: 'add',
    title: '结案',
    loading: false,
    formLabelWidth: '100',
    data: {
      agency: {},
      enterprise: {},
      officerList: [],
      checkItems: [],
      filesData: [],
      caseInfo: {
        agency: {},
        finalCase: {}
      },
    },
    actions: {
      handleClose: handleClose,
      handleDialogOk: handleDialogOk
    },
    rules: {
      'caseCloseType': [{
        required: true,
        trigger: 'change',
        validator: (rule, value, callback) => {
          let _value = dialogConfig.value.data.caseInfo.finalCase.caseCloseType
          if (_value === null || _value === undefined || _value === '') {
            callback(new Error('结案类型不能为空'));
          } else {
            callback();
          }
        },
      }],
      'reviewSituation': [{
        required: true,
        trigger: 'change',
        validator: (rule, value, callback) => {
          let _value = dialogConfig.value.data.caseInfo.finalCase.reviewSituation
          if (_value === null || _value === undefined || _value === '') {
            callback(new Error('复议情况不能为空'));
          } else {
            callback();
          }
        },
      }],
      'litigationSituation': [{
        required: true,
        trigger: 'change',
        validator: (rule, value, callback) => {
          let _value = dialogConfig.value.data.caseInfo.finalCase.litigationSituation
          if (_value === null || _value === undefined || _value === '') {
            callback(new Error('诉讼情况不能为空'));
          } else {
            callback();
          }
        },
      }],
    },
  },
  actions: {},
})

const {
  componentLoading,
  queryParams,
  permissions,
  tableConfig,
  apiConfig,
  dialogConfig,
  actions,
} = toRefs(state)

// 分页查询
function handleQuery(query) {
  queryParams.value = query
  tableConfig.value.tableLoading = true
  apiConfig.value.api.query(queryParams.value).then(res => {
    if (res.success) {
      tableConfig.value.tableData = res
      tableConfig.value.tableLoading = false
    }
  })
}

const activeNames = ref(['1', '2', '4'])

function handleDetail(row) {
  dialogConfig.value.show = true
  dialogConfig.value.mode = 'detail'
  dialogConfig.value.title = '结案'
  dialogConfig.value.loading = true
  findOne(row)
}

function handleCloseCase(row) {
  dialogConfig.value.show = true
  dialogConfig.value.mode = 'closeCase'
  dialogConfig.value.title = '结案'
  dialogConfig.value.loading = true
  findOne(row)
}

function findOne(row) {
  activeNames.value = ['1', '2', '4']
  apiConfig.value.api2.findOne(row.enforcementId).then(res => {
    dialogConfig.value.loading = false
    if (res.success) {
      const data = res.data
      // 处理机构信息
      if (!data.agency) data.agency = {}
      // 执法人员
      data.officerList = data.enforceChecks[0].officerList
      // 处理案件机构信息
      if (!data.caseInfo.agency) data.caseInfo.agency = {}
      // 处理案件信息
      if (!data.caseInfo.finalCase) data.caseInfo.finalCase = {}
      // 响应式更新
      dialogConfig.value.data = Object.assign({}, data)
    } else {
      ElMessage.error('执法信息详情查询失败')
    }
  })
}

const formRef = ref()

function handleDialogOk() {
  let _event = actions.value
  formRef.value.validate(valid => {
    if (valid) {
      dialogConfig.value.loading = true
      apiConfig.value.api.saveFinalCase(dialogConfig.value.data.caseInfo).then(res => {
        dialogConfig.value.loading = false
        dialogConfig.value.show = false
        if (res.success) {
          ElMessage.success('操作成功')
          messagesApi
              .sendMessage({
                title: '结案',
                content: '您有一条待结案记录!',
                routeUrl: '/xzzfgl/xzcf/zfja',
                receiverIds: ['111111']
              })
              .then(res => console.log(res))
          _event.query()
        } else {
          ElMessage.error('操作失败')
        }
      })
    }
  })
}

function handleClose() {
  dialogConfig.value.show = false
}
</script>
<style lang="scss">
.pic-content {
  .el-upload-list__item-thumbnail,
  .el-upload-list__item-actions,
  .el-upload-list__item,
  .el-upload--picture-card {
    width: 64px !important;
    height: 64px !important;
  }
}
</style>
<style lang="scss" scoped>
.browser-businesss-table {
  .browser-businesss-table-dialog-form {
    padding: 10px 20px 10px 20px;
  }
}

.width-100 {
  width: 100%;
}

.padding-bottom-10 {
  padding-bottom: 10px;
}

:deep(.el-input) {
  width: 100%;
}

:deep(.el-select__wrapper.is-disabled) {
  background: unset !important;
}

:deep(.el-select__wrapper.is-disabled .el-select__selected-item) {
  color: #606266 !important;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  background: unset !important;
}

:deep(.el-input__inner) {
  -webkit-text-fill-color: #606266 !important;
}
</style>