caseEditor/src/app/ga/view/example/index.vue

<template>
  <com-head :options="[{ name: '案件管理', value: '2' }]">
    <el-form label-width="84px" inline>
      <el-form-item label="标题：">
        <el-input v-model="state.query.caseTitle" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="承办单位：">
        <com-company v-model="state.query.deptId" />
      </el-form-item>
      <el-form-item class="searh-btns" style="grid-area: 1 / 4 / 2 / 6">
        <el-button type="primary" @click="refresh">查询</el-button>
        <el-button type="primary" plain @click="queryReset">重置</el-button>
      </el-form-item>
    </el-form>
  </com-head>

  <div class="body-layer">
    <div class="body-head">
      <h3 style="visibility: hidden">案件列表</h3>
      <div class="table-ctrl-right">
        <el-button type="primary" @click="addHandler" v-pdpath="['add']">
          新增案件
        </el-button>
      </div>
    </div>

    <el-table
      :data="state.table.rows"
      id="multipleTable"
      style="width: 100%"
      class="table"
      size="large"
    >
      <el-table-column label="序号" width="70" v-slot:default="{ $index }">
        <div style="text-align: center">
          {{ state.pag.size * (state.pag.currentPage - 1) + $index + 1 }}
        </div>
      </el-table-column>
      <el-table-column label="标题" prop="caseTitle"></el-table-column>
      <el-table-column label="承办单位" prop="deptName"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column
        label="操作"
        v-slot:default="{ row }: { row: Example }"
        :width="240"
      >
        <CaseEditMenu
          :caseId="row.caseId"
          :case="row"
          :prevMenu="[
            { key: 'info', label: '编辑案件', onClick: () => editHandler(row) },
          ]"
          v-if="row.caseId"
        />
        <span class="oper-span" @click="gotoQuery(row.caseId)" v-pdpath="['view']"
          >查看</span
        >
        <span
          class="oper-span"
          @click="del(row)"
          style="color: var(--primaryColor)"
          v-pdpath="['del']"
        >
          删除
        </span>
      </el-table-column>
    </el-table>

    <com-pagination
      @size-change="changPageSize"
      @current-change="changPageCurrent"
      :current-page="state.pag.currentPage"
      :page-size="state.pag.size"
      :total="state.pag.total"
    />
  </div>
</template>

<script setup lang="ts">
import comHead from "@/components/head/index.vue";
import comCompany from "@/components/company-select/index.vue";
import comPagination from "@/components/pagination/index.vue";
import { usePagging } from "@/hook/pagging";
import { Example, delExample, getExamplePagging } from "@/app/criminal/store/example";
import CaseEditMenu from "@/view/case/editMenu.vue";
import { gotoQuery } from "@/view/case/help";
import { addExample, editExample } from "./quisk";

const { state, refresh, queryReset, del, changPageSize, changPageCurrent } = usePagging({
  get: getExamplePagging,
  del: delExample,
  mapper: {
    delMsg: "删除案件，相关档案也会一并删除，确定要删除吗？",
  },
  paramsTemlate: { caseTitle: "", deptId: "" },
});

const addHandler = async () => {
  if (await addExample({})) {
    refresh();
  }
};

const editHandler = async (example: Example) => {
  if (await editExample({ example })) {
    refresh();
  }
};
</script>