todo.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <div class="business-publish-todo-container layout-pd">
  3. <!-- 搜索 -->
  4. <el-card shadow="never">
  5. <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
  6. <el-form-item label="关键词" prop="Keyword">
  7. <el-input v-model="state.queryParams.Keyword" placeholder="工单编码/标题" clearable @keyup.enter="queryList" class="keyword-input" />
  8. </el-form-item>
  9. <el-form-item label="归档类型" prop="FiledType">
  10. <el-select v-model="state.queryParams.FiledType" placeholder="请选择归档类型">
  11. <el-option label="中心归档" value="10" />
  12. <el-option label="部门归档" value="20" />
  13. </el-select>
  14. </el-form-item>
  15. <el-form-item label="是否会签" prop="IsCountersign">
  16. <el-select v-model="state.queryParams.IsCountersign" placeholder="请选择是否会签">
  17. <el-option label="是" value="true" />
  18. <el-option label="否" value="false" />
  19. </el-select>
  20. </el-form-item>
  21. <el-form-item>
  22. <el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
  23. <el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
  24. <SvgIcon name="ele-Refresh" class="mr5" />重置
  25. </el-button>
  26. </el-form-item>
  27. </el-form>
  28. </el-card>
  29. <el-card shadow="never">
  30. <ProTable
  31. ref="proTableRef"
  32. :columns="columns"
  33. :data="state.tableData"
  34. @updateTable="queryList"
  35. :loading="state.loading"
  36. :total="state.total"
  37. v-model:page-index="state.queryParams.PageIndex"
  38. v-model:page-size="state.queryParams.PageSize"
  39. >
  40. <template #tableHeader="scope">
  41. <el-button type="primary" @click="publishMultiple" v-auth="'business:publish:todo:multiple'" :disabled="!scope.isSelected">
  42. <SvgIcon name="iconfont icon-tianjiawenjian" class="mr5" />批量发布
  43. </el-button>
  44. </template>
  45. <template #isProvince="{ row }">
  46. <span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
  47. </template>
  48. <template #title="{ row }">
  49. <order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
  50. </template>
  51. <template #employeeName="{ row }">
  52. <span
  53. >{{ row.acceptorName }} <span v-if="row.acceptorStaffNo">[{{ row.acceptorStaffNo }}]</span>
  54. </span>
  55. </template>
  56. <!-- 表格操作 -->
  57. <template #operation="{ row }">
  58. <el-button link type="primary" @click="publish(row)" title="发布工单" v-auth="'business:publish:todo:publish'"> 发布 </el-button>
  59. <!-- <el-button link type="primary" @click="redo(row)" title="重办工单" v-auth="'business:publish:todo:publish'"> 重办 </el-button>-->
  60. <order-detail :order="row" @updateList="queryList" />
  61. </template>
  62. </ProTable>
  63. </el-card>
  64. <!-- 工单发布详情 -->
  65. <order-publish ref="orderPublishRef" @updateList="queryList" />
  66. <!-- 工单重办详情 -->
  67. <order-redo ref="orderRedoRef" @updateList="queryList" />
  68. </div>
  69. </template>
  70. <script setup lang="tsx" name="businessPublishTodo">
  71. import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
  72. import { ElButton, ElMessage, ElMessageBox, FormInstance } from 'element-plus';
  73. import { throttle } from '@/utils/tools';
  74. import { formatDate } from '@/utils/formatTime';
  75. import { batchPublishOrder, publishList } from '@/api/todo/publish';
  76. // 引入组件
  77. const OrderPublish = defineAsyncComponent(() => import('@/views/business/publish/component/Order-publish.vue')); // 发布
  78. const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
  79. const OrderRedo = defineAsyncComponent(() => import('@/views/business/publish/component/Order-redo.vue')); // 重办
  80. // 定义变量内容
  81. const ruleFormRef = ref<RefType>(); // 表单ref
  82. const state = reactive({
  83. queryParams: {
  84. // 查询条件
  85. PageIndex: 1,
  86. PageSize: 10,
  87. Keyword: null, // 关键词
  88. FiledType: null, // 归档类型
  89. IsCountersign: null, // 是否会签
  90. },
  91. tableData: [], //表单
  92. loading: false, // 加载
  93. total: 0, // 总数
  94. });
  95. const proTableRef = ref<RefType>(); // 表格ref
  96. const selectable = (row: any) => {
  97. //设置省工单和会签工单不可选(不可批量发布)
  98. return !row.isProvince && row.counterSignType === null;
  99. };
  100. // 表格配置项
  101. const columns = ref<any[]>([
  102. { type: 'selection', selectable: selectable, fixed: 'left', width: 55 },
  103. { prop: 'no', label: '工单编码', width: 150 },
  104. { prop: 'isProvince', label: '省/市工单', width: 100 },
  105. { prop: 'statusText', label: '发布状态', width: 100 },
  106. { prop: 'title', label: '工单标题', width: 300 },
  107. { prop: 'sourceChannel', label: '来源方式', width: 120 },
  108. { prop: 'acceptType', label: '受理类型', width: 150 },
  109. { prop: 'counterSignTypeText', label: '是否会签', width: 100 },
  110. { prop: 'actualHandleOrgName', label: '接办部门', width: 150 },
  111. { prop: 'employeeName', label: '受理人', width: 120 },
  112. {
  113. prop: 'actualHandleTime',
  114. label: '接办时间',
  115. width: 170,
  116. render: (scope) => {
  117. return <span>{formatDate(scope.row.actualHandleTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
  118. },
  119. },
  120. {
  121. prop: 'startTime',
  122. label: '受理时间',
  123. width: 170,
  124. render: (scope) => {
  125. return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
  126. },
  127. },
  128. {
  129. prop: 'filedTime',
  130. label: '办结时间',
  131. width: 170,
  132. render: (scope) => {
  133. return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
  134. },
  135. },
  136. { prop: 'operation', label: '操作', fixed: 'right', width: 180, align: 'center' },
  137. ]);
  138. /** 获取列表 */
  139. const queryList = throttle(() => {
  140. state.loading = true;
  141. publishList(state.queryParams)
  142. .then((res: any) => {
  143. state.tableData = res.result?.items ?? [];
  144. state.total = res.result?.total ?? 0;
  145. state.loading = false;
  146. })
  147. .catch(() => {
  148. state.loading = false;
  149. });
  150. }, 300);
  151. /** 重置按钮操作 */
  152. const resetQuery = throttle((formEl: FormInstance | undefined) => {
  153. if (!formEl) return;
  154. formEl.resetFields();
  155. queryList();
  156. }, 300);
  157. // 批量发布
  158. const publishMultiple = () => {
  159. const ids = proTableRef.value.selectedList.map((item: any) => item.id);
  160. const names = proTableRef.value.selectedList.map((item: any) => item.title);
  161. ElMessageBox.confirm(`您确定要发布:【${names}】的工单吗,是否继续?`, '提示', {
  162. confirmButtonText: '确认',
  163. cancelButtonText: '取消',
  164. type: 'warning',
  165. draggable: true,
  166. cancelButtonClass: 'default-button',
  167. autofocus: false,
  168. })
  169. .then(() => {
  170. batchPublishOrder({ ids }).then(() => {
  171. ElMessage.success('操作成功');
  172. queryList();
  173. });
  174. })
  175. .catch(() => {});
  176. };
  177. // 发布
  178. const orderPublishRef = ref<RefType>(); // 工单发布详情ref
  179. const publish = (row: any) => {
  180. orderPublishRef.value.openDialog(row);
  181. };
  182. // 重办
  183. const orderRedoRef = ref<RefType>(); // 工单重办ref
  184. const redo = (row: any) => {
  185. orderRedoRef.value.openDialog(row);
  186. };
  187. onMounted(() => {
  188. queryList();
  189. });
  190. </script>