|
|
@@ -1,88 +1,63 @@
|
|
|
<template>
|
|
|
<div class="business-special-audit-container layout-padding">
|
|
|
<div class="layout-padding-auto layout-padding-view pd20">
|
|
|
- <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline :disabled="state.loading">
|
|
|
- <el-form-item label="关键词" prop="Keyword">
|
|
|
- <el-input v-model.trim="state.queryParams.Keyword" placeholder="工单编码/标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
|
|
|
- <el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
|
|
|
- <SvgIcon name="ele-Refresh" class="mr5" />重置
|
|
|
+ <vxe-grid v-bind="gridOptions" v-on="gridEvents" ref="gridRef" @checkbox-all="selectAllChangeEvent" @checkbox-change="selectChangeEvent">
|
|
|
+ <template #form>
|
|
|
+ <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline :disabled="gridOptions.loading">
|
|
|
+ <el-form-item label="关键词" prop="Keyword">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="state.queryParams.Keyword"
|
|
|
+ placeholder="工单编码/标题"
|
|
|
+ clearable
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ class="keyword-input"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleQuery" :loading="gridOptions.loading">
|
|
|
+ <SvgIcon name="ele-Search" class="mr5" />查询
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="gridOptions.loading">
|
|
|
+ <SvgIcon name="ele-Refresh" class="mr5" />重置
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ <template #toolbar_buttons>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="onAuditMultiple"
|
|
|
+ :disabled="isChecked"
|
|
|
+ :loading="gridOptions.loading"
|
|
|
+ v-auth="'business:special:audit:multiple'"
|
|
|
+ >批量审批<span v-if="checkTable.length">({{ checkTable.length }})</span>
|
|
|
</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <vxe-toolbar
|
|
|
- ref="toolbarRef"
|
|
|
- :loading="state.loading"
|
|
|
- custom
|
|
|
- :refresh="{
|
|
|
- queryMethod: handleQuery,
|
|
|
- }"
|
|
|
- >
|
|
|
- <template #buttons>
|
|
|
- <el-button type="primary" @click="onAuditMultiple" :disabled="isChecked" :loading="state.loading" v-auth="'business:special:audit:multiple'"
|
|
|
- >批量审批<span v-if="checkTable.length">({{checkTable.length}})</span>
|
|
|
+ </template>
|
|
|
+ <template #statusText="{ row }">
|
|
|
+ <el-text type="danger" tag="b" v-if="[1, 2, 3, 9, 101, 102, 103, 104, 105, 200].includes(row.order?.status)">{{
|
|
|
+ row.order?.statusText
|
|
|
+ }}</el-text>
|
|
|
+ <span v-else>{{ row.order?.statusText }}</span>
|
|
|
+ </template>
|
|
|
+ <template #order_detail="{ row }">
|
|
|
+ <order-detail :order="row.order" @updateList="refreshList">{{ row.order?.title }}</order-detail>
|
|
|
+ </template>
|
|
|
+ <template #action="{ row }">
|
|
|
+ <el-button link type="primary" @click="onAudit(row)" title="审批特提" v-auth="'business:special:audit'" v-show="[0].includes(row.state)">
|
|
|
+ 审批
|
|
|
</el-button>
|
|
|
+ <el-button link type="primary" @click="onAuditDetail(row)" title="查看审批明细" v-if="[1, 2].includes(row.state)"> 审批明细 </el-button>
|
|
|
</template>
|
|
|
- </vxe-toolbar>
|
|
|
- <div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
|
|
|
- <vxe-table
|
|
|
- border
|
|
|
- :loading="state.loading"
|
|
|
- :data="state.tableData"
|
|
|
- :column-config="{ resizable: true }"
|
|
|
- :row-config="{ isCurrent: true, isHover: true, height: 30, useKey: true }"
|
|
|
- ref="tableRef"
|
|
|
- height="auto"
|
|
|
- auto-resize
|
|
|
- show-overflow
|
|
|
- :scrollY="{ enabled: true, gt: 100 }"
|
|
|
- id="orderSpecialAudit"
|
|
|
- :custom-config="{ storage: true }"
|
|
|
- showHeaderOverflow
|
|
|
- @checkbox-all="selectAllChangeEvent"
|
|
|
- @checkbox-change="selectChangeEvent"
|
|
|
- >
|
|
|
- <vxe-column type="checkbox" width="50" align="center"></vxe-column>
|
|
|
- <vxe-column field="order.statusText" title="工单状态" width="100">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-text type="danger" tag="b" v-if="[1, 2, 3, 9, 101, 102, 103, 104, 105, 200].includes(row.order.status)">{{ row.order.statusText }}</el-text>
|
|
|
- <span v-else>{{ row.order.statusText }}</span>
|
|
|
- </template>
|
|
|
- </vxe-column>
|
|
|
- <vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
|
|
|
- <vxe-column field="order.title" title="工单标题" width="200">
|
|
|
- <template #default="{ row }">
|
|
|
- <order-detail :order="row.order" @updateList="refreshList">{{ row.order?.title }}</order-detail>
|
|
|
- </template>
|
|
|
- </vxe-column>
|
|
|
- <vxe-column field="order.sourceChannel" title="来源渠道" width="110"></vxe-column>
|
|
|
- <vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
|
|
|
- <vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
|
|
|
- <vxe-column field="order.orgLevelOneName" title="一级部门" width="140"></vxe-column>
|
|
|
- <vxe-column field="stateText" title="特提审批状态" width="140"></vxe-column>
|
|
|
- <vxe-column field="cause" title="特提原因" width="150"></vxe-column>
|
|
|
- <vxe-column field="creatorName" title="申请人" width="140"></vxe-column>
|
|
|
- <vxe-column field="creatorOrgName" title="申请部门" width="140"></vxe-column>
|
|
|
- <vxe-column field="reason" title="申请理由" min-width="150"></vxe-column>
|
|
|
- <vxe-column title="操作" fixed="right" width="100" align="center">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button link type="primary" @click="onAudit(row)" title="审批特提" v-auth="'business:special:audit'" v-if="[0].includes(row.state)">
|
|
|
- 审批
|
|
|
- </el-button>
|
|
|
- <el-button link type="primary" @click="onAuditDetail(row)" title="查看审批明细" v-if="[1, 2].includes(row.state)"> 审批明细 </el-button>
|
|
|
- </template>
|
|
|
- </vxe-column>
|
|
|
- </vxe-table>
|
|
|
- </div>
|
|
|
- <pagination
|
|
|
- @pagination="queryList"
|
|
|
- :total="state.total"
|
|
|
- v-model:current-page="state.queryParams.PageIndex"
|
|
|
- v-model:page-size="state.queryParams.PageSize"
|
|
|
- :disabled="state.loading"
|
|
|
- />
|
|
|
+ <template #pager>
|
|
|
+ <pagination
|
|
|
+ @pagination="queryList"
|
|
|
+ :total="state.total"
|
|
|
+ v-model:current-page="state.queryParams.PageIndex"
|
|
|
+ v-model:page-size="state.queryParams.PageSize"
|
|
|
+ :disabled="gridOptions.loading"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </vxe-grid>
|
|
|
</div>
|
|
|
<!-- 特提审批 -->
|
|
|
<special-audit ref="specialAuditRef" @updateList="refreshList" />
|
|
|
@@ -111,11 +86,95 @@ const state = reactive({
|
|
|
PageSize: 20,
|
|
|
Keyword: null, // 关键字
|
|
|
State: 0, // 审核结果 0 待审核 1 审核通过 2 审核不通过
|
|
|
+ SortField: null, // 排序字段
|
|
|
+ SortRule: null, // 排序规则 0 升序 1 降序
|
|
|
},
|
|
|
tableData: [], //表单
|
|
|
loading: false, // 加载
|
|
|
total: 0, // 总数
|
|
|
});
|
|
|
+const gridOptions = reactive<any>({
|
|
|
+ loading: false,
|
|
|
+ border: true,
|
|
|
+ showOverflow: true,
|
|
|
+ columnConfig: {
|
|
|
+ resizable: true,
|
|
|
+ },
|
|
|
+ scrollY: {
|
|
|
+ enabled: true,
|
|
|
+ gt: 100,
|
|
|
+ },
|
|
|
+ toolbarConfig: {
|
|
|
+ zoom: true,
|
|
|
+ custom: true,
|
|
|
+ refresh: {
|
|
|
+ queryMethod: () => {
|
|
|
+ handleQuery();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ slots: {
|
|
|
+ buttons: 'toolbar_buttons',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ customConfig: {
|
|
|
+ storage: true,
|
|
|
+ },
|
|
|
+ id: 'orderSpecialAudit',
|
|
|
+ rowConfig: { isHover: true, height: 30, isCurrent: true, useKey: true },
|
|
|
+ height: 'auto',
|
|
|
+ columns: [
|
|
|
+ { type: 'checkbox', width: 50, align: 'center' },
|
|
|
+ {
|
|
|
+ field: 'order.expiredStatusText',
|
|
|
+ title: '状态',
|
|
|
+ width: 60,
|
|
|
+ align: 'center',
|
|
|
+ slots: {
|
|
|
+ default: ({ row }) => {
|
|
|
+ return <span class={'overdue-status-' + row.order?.expiredStatus} title={row.order.expiredStatusText}></span>;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'order.statusText',
|
|
|
+ title: '工单状态',
|
|
|
+ width: 100,
|
|
|
+ slots: {
|
|
|
+ default: 'statusText',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ { field: 'order.no', title: '工单编码', width: 140 },
|
|
|
+ { field: 'order.title', title: '工单标题', minWidth: 200, slots: { default: 'order_detail' } },
|
|
|
+ { field: 'order.sourceChannel', title: '来源渠道', width: 110 },
|
|
|
+ { field: 'order.hotspotName', title: '热点分类', width: 150 },
|
|
|
+ { field: 'order.acceptorName', title: '受理人', width: 120 },
|
|
|
+ { field: 'order.orgLevelOneName', title: '一级部门', width: 140 },
|
|
|
+ { field: 'stateText', title: '特提审批状态', width: 140 },
|
|
|
+ { field: 'cause', title: '特提原因', width: 150 },
|
|
|
+ { field: 'creatorName', title: '申请人', width: 140 },
|
|
|
+ { field: 'creatorOrgName', title: '申请部门', width: 140 },
|
|
|
+ { field: 'reason', title: '申请理由', minWidth: 150 },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ fixed: 'right',
|
|
|
+ width: 100,
|
|
|
+ align: 'center',
|
|
|
+ slots: { default: 'action' },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [],
|
|
|
+ sortConfig: {
|
|
|
+ remote: true,
|
|
|
+ },
|
|
|
+});
|
|
|
+const gridEvents = {
|
|
|
+ sortChange(val: any) {
|
|
|
+ state.queryParams.SortField = val.order ? val.field : null;
|
|
|
+ // 0 升序 1 降序
|
|
|
+ state.queryParams.SortRule = val.order ? (val.order == 'desc' ? 1 : 0) : null;
|
|
|
+ handleQuery();
|
|
|
+ },
|
|
|
+};
|
|
|
// 手动查询，将页码设置为1
|
|
|
const handleQuery = () => {
|
|
|
state.queryParams.PageIndex = 1;
|
|
|
@@ -123,23 +182,23 @@ const handleQuery = () => {
|
|
|
};
|
|
|
// 刷新列表
|
|
|
const refreshList = () => {
|
|
|
- queryList();
|
|
|
+ queryList();
|
|
|
};
|
|
|
/** 获取列表 */
|
|
|
const queryList = () => {
|
|
|
- state.loading = true;
|
|
|
+ gridOptions.loading = true;
|
|
|
specialList(state.queryParams)
|
|
|
.then((res) => {
|
|
|
- state.tableData = res.result?.items ?? [];
|
|
|
+ gridOptions.data = res.result?.items ?? [];
|
|
|
state.total = res.result?.total ?? 0;
|
|
|
- state.loading = false;
|
|
|
- tableRef.value.clearCheckboxRow();
|
|
|
+ gridOptions.loading = false;
|
|
|
+ gridRef.value.clearCheckboxRow();
|
|
|
checkTable.value = [];
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err);
|
|
|
- state.loading = false;
|
|
|
- tableRef.value.clearCheckboxRow();
|
|
|
+ gridOptions.loading = false;
|
|
|
+ gridRef.value.clearCheckboxRow();
|
|
|
checkTable.value = [];
|
|
|
});
|
|
|
};
|
|
|
@@ -166,31 +225,27 @@ const onAuditMultiple = () => {
|
|
|
const ids = checkTable.value.map((item: any) => item.id);
|
|
|
specialAuditMultipleRef.value.openDialog(ids);
|
|
|
};
|
|
|
-const tableRef = ref<RefType>();
|
|
|
const checkTable = ref<EmptyArrayType>([]);
|
|
|
+const gridRef = ref<RefType>();
|
|
|
const selectAllChangeEvent = ({ checked }) => {
|
|
|
- if (tableRef.value) {
|
|
|
- const records = tableRef.value.getCheckboxRecords();
|
|
|
+ if (gridRef.value) {
|
|
|
+ const records = gridRef.value.getCheckboxRecords();
|
|
|
checkTable.value = records;
|
|
|
console.log(checked ? '所有勾选事件' : '所有取消事件', records);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const selectChangeEvent = ({ checked }) => {
|
|
|
- if (tableRef.value) {
|
|
|
- const records = tableRef.value.getCheckboxRecords();
|
|
|
+ if (gridRef.value) {
|
|
|
+ const records = gridRef.value.getCheckboxRecords();
|
|
|
checkTable.value = records;
|
|
|
console.log(checked ? '勾选事件' : '取消事件', records);
|
|
|
}
|
|
|
};
|
|
|
const isChecked = computed(() => {
|
|
|
- return !Boolean(checkTable.value.length);
|
|
|
+ return !checkTable.value.length;
|
|
|
});
|
|
|
-const toolbarRef = ref<RefType>();
|
|
|
onMounted(() => {
|
|
|
queryList();
|
|
|
- if (tableRef.value && toolbarRef.value) {
|
|
|
- tableRef.value.connect(toolbarRef.value);
|
|
|
- }
|
|
|
});
|
|
|
</script>
|
zhangchong