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

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

<script setup>
import { ref, reactive, h, onMounted } from 'vue';
import { CRUD_OPTIONS } from '@/config';
import CustomCard from '@/components/CustomCard.vue';
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';

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

onMounted(() => {
  getList();
});

/* --------------- data --------------- */
// #region
const crudRef = ref();
const searchData = ref({
  caseId: '',
  caseResult: '',
});
const page = ref({
  currentPage: 1,
  pageSize: 10,
  total: 3,
});
const _loading = ref(false);
const data = ref([]);
const landsArr = ref([]);
const option = ref({
  ...CRUD_OPTIONS,
  refreshBtn: false,
  rowKey: 'caseId',
  editTitle: '案件登记处理',
  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: 'caseResult',
      display: false,
      search: true,
      addDisplay: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '案件结果',
      prop: 'caseResult',
      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: 'land',
          render: ({ row }) => {
            return h('span', {}, row.land);
          },
        },
        {
          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,
        },
        {
          label: '现场取证',
          prop: 'sceneProof',
          span: 24,
          display: true,
          editDisplay: true,
        },
        {
          label: '执法文书',
          prop: 'lawDocument',
          labelSuffix: '件',
          span: 24,
          display: true,
          type: 'radio',
          editDisplay: true,
          dicData: [
            {
              label: '协助调查函',
              value: 1,
            },
            {
              label: '抽样取样凭证',
              value: 2,
            },
            {
              label: '检测报告',
              value: 3,
            },
            {
              label: '其他文书',
              value: 4,
            },
          ],
        },
        {
          label: '',
          prop: 'attrs_',
        },
      ],
    },
    {
      label: '处理结果>',
      prop: 'caseResult_',
      addDisplay: false,
      column: [
        {
          label: '案件处理结果',
          prop: 'caseResult',
          type: 'radio',
          value: 1,
          dicData: [
            {
              label: '正常营业，无违规行为',
              value: 1,
            },
            {
              label: '简易程序，当场行政处罚',
              value: 2,
            },
            {
              label: '普通程序，当场处罚立案审批',
              value: 3,
            },
            {
              label: '移送程序，案件移送',
              value: 4,
            },
            {
              label: '特殊程序，案件终止',
              value: 5,
            },
          ],
          span: 24,
          display: true,
          editDisplay: true,
        },
      ],
    },
  ],
});
const caseInfo = ref({
  visible: false,
});
const examineForm = reactive({
  caseId: '',
  proof: [],
  attrs: [],
});
// #endregion

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

// #region

async function getList() {
  let params = {
    current: page.value.currentPage,
    size: page.value.pageSize,
    ...searchData.value,
  };
  console.log('params -- ', params);
  let res = await getLandIllegal(params);
  console.log('res -- ', res);
  if (res.code == 200) {
    data.value = res.data.records;
    page.value.total = res.data.total;
  }
}
function handlePageChange(val) {
  console.log('page', 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);
}
function handleSearch(form, done) {
  console.log('search', form);
  let t = setTimeout(() => {
    clearTimeout(t);
    done();
  }, 1000);
}
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('c-1');
      })
      .catch(() => {});
  }
  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();
  }
  console.log('val', data);
  let res = await registerLandIllegal(data);
  console.log('res --', res);
  loading();
  if (res.code == 200) {
    ElMessage.success('提交成功');
    getList();
  }
}
async function getDetails(id) {
  let res = await illegalInfo(id);
  console.log('detaile', res);
}
// #endregion
</script>

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