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>
          <span>（照片、视频）</span>
        </section>
      </template>
      <template #attrs_-form>
        <FileUpload v-model:list="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 } 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';

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

/* --------------- data --------------- */
// #region
const crudRef = ref();
const searchData = ref({
  caseNum: '',
  process: '',
});
const page = ref({
  currentPage: 1,
  pageSize: 10,
  total: 3,
});
const _loading = ref(false);
const data = ref([
  {
    id_: '1',
    caseNum: '111111111',
    name: '张三',
    unit: '123333333333333333333333333333',
    owner: '张三',
    process: '北京',
    date: '2020-02-02',
  },
  {
    id_: '2',
    caseNum: '222222222',
    name: '张三',
    unit: '123333333333333333333333333333',
    owner: '张三',
    process: '北京',
    date: '2020-02-02',
  },
  {
    id_: '3',
    caseNum: '333333333333',
    name: '张三',
    unit: '123333333333333333333333333333',
    owner: '张三',
    process: '北京',
    date: '2020-02-02',
  },
]);
const option = ref({
  ...CRUD_OPTIONS,
  refreshBtn: false,
  editTitle: '案件登记处理',
  column: [
    {
      label: '案件编号',
      prop: 'caseNum',
      search: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '案件名称',
      prop: 'name',
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '关联单位',
      prop: 'unit',
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '关联土地·',
      prop: 'land',
      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) => res?.data?.records ?? [],
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '联系电话',
      prop: 'phone',
      hide: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '法定代表人',
      prop: 'onwer',
      addDisplay: true,
      hide: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '统一社会信用代码',
      prop: 'code',
      addDisplay: true,
      hide: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '违法情况',
      prop: 'illegal',
      type: 'textarea',
      addDisplay: true,
      hide: true,
      width: '100%',
      span: 24,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '负责人',
      prop: 'owner',
      display: false,
      addDisplay: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '案件进度',
      prop: 'process',
      display: false,
      search: true,
      addDisplay: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '案件结果',
      prop: 'result',
      display: false,
      addDisplay: true,
      editDisplay: false,
      viewDisplay: false,
    },
    {
      label: '处理时间',
      prop: 'date',
      display: false,
      addDisplay: false,
      editDisplay: true,
      viewDisplay: false,
    },
  ],
  group: [
    {
      label: '案件信息>',
      prop: 'caseInfo',
      addDisplay: false,
      column: [
        {
          label: '案件名称',
          prop: 'name',
          render: ({ row }) => {
            return h('span', {}, row.name);
          },
        },
        {
          label: '案件编号',
          prop: 'caseNum',
          render: ({ row }) => {
            return h('span', {}, row.caseNum);
          },
        },
        {
          label: '关联单位',
          prop: 'unit',
          render: ({ row }) => {
            return h('span', {}, row.unit);
          },
        },
        {
          label: '关联地块',
          prop: 'land',
          render: ({ row }) => {
            return h('span', {}, row.land);
          },
        },
        {
          label: '法定代表人',
          prop: 'onwer',
          render: ({ row }) => {
            return h('span', {}, row.onwer);
          },
        },
        {
          label: '联系电话',
          prop: 'phone',
          render: ({ row }) => {
            return h('span', {}, row.phone);
          },
        },
        {
          label: '统一社会信用代码',
          prop: 'code',
          span: 24,
          render: ({ row }) => {
            return h('span', {}, row.code);
          },
        },
        {
          label: '违法情况',
          prop: 'result',
          span: 24,
          render: ({ row }) => {
            return h('span', {}, row.result);
          },
        },
      ],
    },
    {
      label: '案件处理>',
      prop: 'caseHandle',
      addDisplay: false,
      column: [
        {
          label: '案情记录',
          prop: 'caseRecords',
          type: 'textarea',
          span: 24,
          display: true,
          editDisplay: true,
        },
        {
          label: '现场取证',
          prop: 'sceneProof',
          span: 24,
          display: true,
          editDisplay: true,
        },
        {
          label: '执法文书',
          prop: 'document',
          labelSuffix: '件',
          span: 24,
          display: true,
          type: 'radio',
          editDisplay: true,
          dicData: [
            {
              label: '协助调查函',
              value: 0,
            },
            {
              label: '抽样取样凭证',
              value: 1,
            },
            {
              label: '检测报告',
              value: 2,
            },
            {
              label: '其他文书',
              value: 3,
            },
          ],
        },
        {
          label: '',
          prop: 'attrs_',
        },
      ],
    },
    {
      label: '处理结果>',
      prop: 'caseResult_',
      addDisplay: false,
      column: [
        {
          label: '案件处理结果',
          prop: 'caseResult',
          type: 'radio',
          value: 0,
          dicData: [
            {
              label: '正常营业，无违规行为',
              value: 0,
            },
            {
              label: '简易程序，当场行政处罚',
              value: 1,
            },
            {
              label: '普通程序，当场处罚立案审批',
              value: 2,
            },
            {
              label: '移送程序，案件移送',
              value: 3,
            },
            {
              label: '特殊程序，案件终止',
              value: 4,
            },
          ],
          span: 24,
          display: true,
          editDisplay: true,
        },
      ],
    },
  ],
});
const caseInfo = ref({
  visible: false,
});
const examineForm = reactive({
  record: '',
  proof: [],
  document: 1,
  attrs: [],
  result: 1,
});
// #endregion

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

// #region
function handlePageChange(val) {
  console.log('page', val);
  page.value.currentPage = val;
}
function handleSizeChange(val) {
  page.value.pageSize = val;
  console.log('size', val, page.value);
}
function handleInfo(row) {
  console.log('row', row);
  // 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);
}
function handleRowSave(val, done, loading) {
  console.log('val', val);
  console.log('done', done);
  console.log('loading', loading);
  loading();
  let t = setTimeout(() => {
    clearTimeout(t);
    done();
  }, 1000);
}

function handleExamine(val, done, loading) {
  console.log('val', val);
  console.log('done', done);
  console.log('loading', loading);
  loading();
}
// #endregion
</script>

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