daimp-front/sub-government-affairs-service/src/views/landManage/component/illegalHandle/index.vue

<template>
  <section class="custom-page">
    <avue-crud
      ref="crudRef"
      v-model:page="page"
      v-model:search="searchData"
      :option="option"
      :data="data"
      :table-loading="_loading"
      :before-open="handleOpenFrom"
      :before-close="handleCloseFrom"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
      @search-change="handleSearch"
      @search-reset="handleResetSearch"
      @row-save="handleRowSave"
      @row-update="handleExamine"
      @cell-click="handleCellClick"
    >
      <template #menu="{ row }">
        <el-button v-if="row.status == '0'" type="primary" @click="handleInfo(row)">登记处理</el-button>
      </template>
      <template #status="{ row }"> {{ row.status == '0' ? '未' : '已' }}处理 </template>
      <template #sceneProof-form="{ row, type }">
        <section class="proof_content_">
          <span v-if="type == 'add'">（照片、视频）</span>
          <Attrs v-model:attrs="examineForm.proof" :type="type" :limit="5" :file-num="5" accept="image/*,video/*" />
        </section>
      </template>
      <template #attrs_-form="{ row, type }">
        <FileUpload v-model:attrs="examineForm.attrs" :format="['rar', 'zip', 'doc', 'docx', 'pdf']" :type="type" />
      </template>
    </avue-crud>
  </section>
  <Register v-model:visible="caseInfo.visible" />
</template>

<script setup>
import { ref, reactive, h, onMounted, watch } from 'vue';
import { CRUD_OPTIONS } from '@/config';
import { useUserStore } from '@/store/modules/user';
import Register from './common/Register.vue';
import FileUpload from './common/FileUpload.vue';
import { getLandIllegal, createLandIllegal, registerLandIllegal, illegalInfo } from '@/apis/land';
import { ElMessage, ElMessageBox } from 'element-plus';
import Attrs from '../../common/Attrs.vue';
import { add } from 'lodash';

const { VITE_APP_BASE_API } = import.meta.env;
const UserStore = useUserStore();

onMounted(getList);

/* --------------- data --------------- */
// #region
const crudRef = ref();
const searchData = ref({
  caseId: '',
  status: '',
});
const page = ref({
  currentPage: 1,
  pageSize: 10,
  total: 3,
});
const _loading = ref(false);
const data = ref([]);
const landsArr = ref([]);
const resultData = ref([
  {
    label: '正常营业，无违规行为',
    value: 1,
  },
  {
    label: '简易程序，当场行政处罚',
    value: 2,
  },
  {
    label: '普通程序，当场处罚立案审批',
    value: 3,
  },
  {
    label: '移送程序，案件移送',
    value: 4,
  },
  {
    label: '特殊程序，案件终止',
    value: 5,
  },
]);
const documentData = ref([
  {
    label: '协助调查函',
    value: 1,
  },
  {
    label: '抽样取样凭证',
    value: 2,
  },
  {
    label: '检测报告',
    value: 3,
  },
  {
    label: '其他文书',
    value: 4,
  },
]);
const option = ref({
  ...CRUD_OPTIONS,
  refreshBtn: false,
  rowKey: 'caseId',
  editTitle: '案件登记处理',
  selection: false,
  column: [
    {
      label: '案件编号',
      prop: 'caseId',
      search: true,
      editDisplay: false,
      viewDisplay: false,
      rules: [
        {
          required: true,
          message: '请选择',
          trigger: 'blur',
        },
      ],
    },
    {
      label: '案件名称',
      prop: 'caseName',
      editDisplay: false,
      viewDisplay: false,
      rules: [
        {
          required: true,
          message: '请选择',
          trigger: 'blur',
        },
      ],
    },
    {
      label: '关联单位',
      prop: 'relatedUnit',
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '关联土地·',
      prop: 'landId',
      type: 'select',
      addDisplay: true,
      hide: true,
      dicUrl: `${VITE_APP_BASE_API}/land-resource/landManage/page`,
      dicQuery: {
        current: 1,
        size: 9999,
      },
      props: {
        value: 'id',
        label: 'landName',
      },
      dicMethod: 'get',
      dicHeaders: {
        authorization: UserStore.token,
      },
      dicFormatter: (res) => {
        landsArr.value = res?.data?.records ?? [];
        return res?.data?.records ?? [];
      },
      editDisplay: false,
      viewDisplay: false,
      rules: [
        {
          required: true,
          message: '请选择',
          trigger: 'blur',
        },
      ],
    },
    {
      label: '联系电话',
      prop: 'phone',
      hide: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '法定代表人',
      prop: 'legalPerson',
      addDisplay: true,
      hide: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '统一社会信用代码',
      prop: 'usciCode',
      addDisplay: true,
      hide: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '违法情况',
      prop: 'violationSituation',
      type: 'textarea',
      addDisplay: true,
      hide: true,
      width: '100%',
      span: 24,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '负责人',
      prop: 'responsiblePerson',
      display: false,
      addDisplay: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '案件进度',
      prop: 'status',
      display: false,
      search: true,
      type: 'select',
      dicData: [
        { label: '未处理', value: 0 },
        { label: '已处理', value: 1 },
      ],
      addDisplay: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '案件结果',
      prop: 'status',
      display: false,
      addDisplay: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '处理时间',
      prop: 'updateTime',
      display: false,
      addDisplay: false,
      editDisplay: true,
      viewDisplay: false,
    },
  ],
  group: [
    {
      label: '案件信息>',
      prop: 'caseInfo',
      addDisplay: false,
      column: [
        {
          label: '案件名称',
          prop: 'caseName',
          render: ({ row }) => {
            return h('span', {}, row.caseName);
          },
        },
        {
          label: '案件编号',
          prop: 'caseId',
          render: ({ row }) => {
            return h('span', {}, row.caseId);
          },
        },
        {
          label: '关联单位',
          prop: 'relatedUnit',
          render: ({ row }) => {
            return h('span', {}, row.relatedUnit);
          },
        },
        {
          label: '关联地块',
          prop: 'relatedLandname',
          render: ({ row }) => {
            return h('span', {}, row.relatedLandname);
          },
        },
        {
          label: '法定代表人',
          prop: 'legalPerson',
          render: ({ row }) => {
            return h('span', {}, row.legalPerson);
          },
        },
        {
          label: '联系电话',
          prop: 'phone',
          render: ({ row }) => {
            return h('span', {}, row.phone);
          },
        },
        {
          label: '统一社会信用代码',
          prop: 'usciCode',
          span: 24,
          render: ({ row }) => {
            return h('span', {}, row.usciCode);
          },
        },
        {
          label: '违法情况',
          prop: 'violationSituation',
          span: 24,
          render: ({ row }) => {
            return h('span', {}, row.violationSituation);
          },
        },
      ],
    },
    {
      label: '案件处理>',
      prop: 'caseHandle',
      addDisplay: false,
      column: [
        {
          label: '案情记录',
          prop: 'caseRecord',
          type: 'textarea',
          span: 24,
          display: true,
          editDisplay: true,
          rules: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur',
            },
          ],
        },
        {
          label: '现场取证',
          prop: 'sceneProof',
          span: 24,
          display: true,
          editDisplay: true,
        },
        {
          label: '执法文书',
          prop: 'lawDocument',
          span: 24,
          type: 'radio',
          viewDisplay: false,
          addDisplay: false,
          dicData: documentData.value,
          rules: [
            {
              required: true,
              message: '请选择',
              trigger: 'blur',
            },
          ],
        },
        {
          label: '执法文书',
          prop: 'lawDocument',
          span: 24,
          addDisplay: false,
          editDisplay: false,
          viewDisplay: true,
          render: ({ row }) => {
            return h('span', {}, documentData.value.find((item) => item.value == row.lawDocument)?.label);
          },
        },
        {
          label: '',
          prop: 'attrs_',
          span: 24,
        },
      ],
    },
    {
      label: '处理结果>',
      prop: 'caseResult_',
      addDisplay: false,
      column: [
        {
          label: '案件处理结果',
          prop: 'caseResult',
          type: 'radio',
          dicData: resultData.value,
          span: 24,
          addDisplay: false,
          viewDisplay: false,
          rules: [
            {
              required: true,
              message: '请选择',
              trigger: 'blur',
            },
          ],
        },
        {
          label: '案件处理结果',
          prop: 'caseResult',
          span: 24,
          addDisplay: false,
          editDisplay: false,
          render: ({ row }) => {
            return h('span', {}, resultData.value.find((item) => item.value == row.caseResult)?.label);
          },
        },
      ],
    },
  ],
});
const caseInfo = ref({
  visible: false,
});
const examineForm = reactive({
  caseId: '',
  proof: [],
  attrs: [],
});

// #endregion

/* --------------- methods --------------- */

// #region

async function getList() {
  _loading.value = true;
  let params = {
    current: page.value.currentPage,
    size: page.value.pageSize,
    ...searchData.value,
  };
  let res = await getLandIllegal(params);
  console.log('res -- ', res);
  _loading.value = false;
  if (res.code == 200) {
    data.value = res.data.records;
    page.value.total = res.data.total;
  }
}
function handlePageChange(val) {
  page.value.currentPage = val;
  getList();
}
function handleSizeChange(val) {
  page.value.currentPage = 1;
  page.value.pageSize = val;
  getList();
}
function handleInfo(row) {
  console.log('row', row);
  examineForm.caseId = row.caseId;
  // caseInfo.value.visible = true;
  crudRef.value.rowEdit(row);
  // crudRef.value.rowView(row);
}
async function handleSearch(form, done) {
  page.value.currentPage = 1;
  await getList();
  done();
}
async function handleResetSearch() {
  page.value.currentPage = 1;
  await getList();
}

async function handleRowSave(val, done, loading) {
  let data = {
    caseId: val.caseId,
    caseName: val.caseName,
    relatedUnit: val.relatedUnit,
    relatedLand: val.landId,
    phone: val.phone,
    legalPerson: val.legalPerson,
    usciCode: val.usciCode,
    violationSituation: val.violationSituation,
  };
  if (val.landId) {
    data.relatedLandname = landsArr.value.find((item) => item.id == val.landId).landName;
  }
  console.log('val', data);
  let res = await createLandIllegal(data);
  if (res.code == 200) {
    ElMessage.success('创建成功');
    getList();
    done();
    ElMessageBox.confirm('土地违法案件信息已添加，是否现在添加案件处理信息与结果。后续也可以单独添加。', '案件信息已添加', {
      confirmButtonText: '是，现在添加',
      cancelButtonText: '否，后续添加',
      type: 'success',
    }).then(() => {
      getDetails(val.caseId);
    });
  }
  loading();
}

async function handleExamine(val, done, loading) {
  let data = {
    caseId: examineForm.caseId,
    caseRecord: val.caseRecord,
    caseResult: val.caseResult,
    lawDocument: val.lawDocument,
  };
  if (examineForm.proof.length > 0) {
    data.evidenceFile = examineForm.proof.map((v) => v.url).join();
  }
  if (examineForm.attrs.length > 0) {
    data.lawFile = examineForm.attrs.map((v) => `${v.name}&${v.url}`).join();
  }
  let res = await registerLandIllegal(data);
  loading();
  if (res.code == 200) {
    ElMessage.success('提交成功');
    getList();
  }
}
async function getDetails(id, type = 'add') {
  examineForm.caseId = id;
  let res = await illegalInfo(id);
  if (res.code == 200) {
    console.log('detaile', res);
    if (res.data.evidenceFile) {
      examineForm.proof = res.data.evidenceFile.split(',').map((v, i) => {
        return {
          url: v,
          uid: `id_${i}_${Date.now()}`,
        };
      });
    }
    if (res.data.lawFile) {
      examineForm.attrs = res.data.lawFile.split(',').map((v, i) => {
        let [name, url] = v.split('&');
        return {
          name,
          url,
          uid: `id_${i}_${Date.now()}`,
          status: 'success',
        };
      });
    }
    type == 'add' ? crudRef.value.rowEdit(res.data) : crudRef.value.rowView(res.data);
  }
}
const cellClick = ref(['caseId', 'caseName']);
function handleCellClick(row, column) {
  if (cellClick.value.includes(column.columnKey)) {
    getDetails(row.caseId, 'view');
  }
}
function handleOpenFrom(done, type) {
  console.log('form open', type);
  let lab = type == 'view' ? '执法文书附件' : '';
  if (type == 'view') {
    option.value.group.find((v) => v.prop == 'caseHandle').column.find((v) => v.prop == 'attrs_').label = lab;
  }
  done();
}
function handleCloseFrom(done) {
  console.log('form close');
  examineForm.caseId = '';
  examineForm.proof = [];
  examineForm.attrs = [];
  done();
}
// #endregion
</script>

<style lang="scss" scoped>
.proof_content_ {
  display: flex;
  > section {
    flex: 1;
  }
}
::v-deep() {
  .attrs_ {
    .el-form-item__label {
      opacity: 0;
    }
  }
}
</style>