index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424
  1. <template>
  2. <div class="snapshot-info-ssp-config-container layout-padding">
  3. <div class="layout-padding-auto layout-padding-view pd20">
  4. <vxe-grid v-bind="gridOptions" ref="gridRef">
  5. <template #form>
  6. <el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent :disabled="gridOptions.loading">
  7. <el-form-item label="审批状态" prop="State">
  8. <el-radio-group v-model="state.queryParams.State" @change="handleQuery">
  9. <el-radio v-for="item in bulletinState" :label="item.value" :value="item.key" :key="item.key"></el-radio>
  10. </el-radio-group>
  11. </el-form-item>
  12. <el-form-item label="标题" prop="Title">
  13. <el-input v-model="state.queryParams.Title" placeholder="请填写标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
  14. </el-form-item>
  15. <el-form-item>
  16. <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
  17. <el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
  18. </el-form-item>
  19. </el-form>
  20. </template>
  21. <template #toolbar_buttons>
  22. <el-button type="primary" @click="onAdd" v-auth="'snapshot:info:sspConfig:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
  23. </template>
  24. <template #action="{ row }">
  25. <el-button link type="primary" @click="onEdit(row)" v-if="[0, 3].includes(row.bulletinState)" v-auth="'snapshot:info:sspConfig:edit'">
  26. 编辑
  27. </el-button>
  28. <el-button link type="danger" @click="onDelete(row)" v-if="[0].includes(row.bulletinState)" v-auth="'snapshot:info:sspConfig:delete'">
  29. 删除
  30. </el-button>
  31. <el-button
  32. link
  33. type="primary"
  34. @click="onCommit(row)"
  35. v-if="[0, 3].includes(row.bulletinState)"
  36. title="提交审批"
  37. v-auth="'snapshot:info:sspConfig:commit'"
  38. >
  39. 提交
  40. </el-button>
  41. <el-button
  42. link
  43. type="primary"
  44. @click="onShelfFn(row)"
  45. v-if="[2].includes(row.bulletinState) && !row.isArrive"
  46. v-auth="'snapshot:info:sspConfig:onShelf'"
  47. >
  48. 上架
  49. </el-button>
  50. <el-button
  51. link
  52. type="primary"
  53. @click="offShelfFn(row)"
  54. v-if="[2].includes(row.bulletinState) && row.isArrive"
  55. v-auth="'snapshot:info:sspConfig:offShelf'"
  56. >
  57. 下架
  58. </el-button>
  59. <el-button link type="primary" @click="onDetail(row)" v-if="[1, 2].includes(row.bulletinState)"> 查看详情 </el-button>
  60. </template>
  61. <template #pager>
  62. <pagination
  63. @pagination="queryList"
  64. :total="state.total"
  65. v-model:current-page="state.queryParams.PageIndex"
  66. v-model:page-size="state.queryParams.PageSize"
  67. :disabled="state.loading"
  68. />
  69. </template>
  70. </vxe-grid>
  71. </div>
  72. <!-- 更多查询 -->
  73. <el-drawer v-model="drawer" title="更多查询" size="500px">
  74. <el-form :model="state.queryParams" ref="drawerRuleFormRef" @submit.native.prevent label-width="100px">
  75. <el-form-item label="类别名称" prop="SnapshotBulletinTypeName">
  76. <el-input
  77. v-model="state.queryParams.SnapshotBulletinTypeName"
  78. placeholder="请填写类别名称"
  79. clearable
  80. @keyup.enter="handleQuery"
  81. class="keyword-input"
  82. />
  83. </el-form-item>
  84. <el-form-item label="文档编号" prop="No">
  85. <el-input v-model="state.queryParams.No" placeholder="请填写文档编号" clearable @keyup.enter="handleQuery" />
  86. </el-form-item>
  87. <el-form-item label="部门名称" prop="DepartmentName">
  88. <el-input v-model="state.queryParams.DepartmentName" placeholder="请填写部门名称" clearable @keyup.enter="handleQuery" />
  89. </el-form-item>
  90. <el-form-item label="发布人" prop="CreatorName">
  91. <el-input v-model="state.queryParams.CreatorName" placeholder="请填写发布人" clearable @keyup.enter="handleQuery" />
  92. </el-form-item>
  93. <el-form-item label="发布时间" prop="fbTime">
  94. <el-date-picker
  95. v-model="state.queryParams.fbTime"
  96. type="datetimerange"
  97. unlink-panels
  98. range-separator="至"
  99. start-placeholder="开始时间"
  100. end-placeholder="结束时间"
  101. :shortcuts="shortcuts"
  102. @change="handleQuery"
  103. value-format="YYYY-MM-DD[T]HH:mm:ss"
  104. :default-time="defaultTimeStartEnd"
  105. />
  106. </el-form-item>
  107. </el-form>
  108. <template #footer>
  109. <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
  110. <el-button @click="resetQuery(drawerRuleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
  111. </template>
  112. </el-drawer>
  113. <!-- 新增 -->
  114. <config-add ref="configAddRef" @updateList="queryList" />
  115. <!-- 修改 -->
  116. <config-edit ref="configEditRef" @updateList="queryList" />
  117. <!-- 详情 -->
  118. <config-detail ref="configDetailRef" @updateList="queryList" />
  119. </div>
  120. </template>
  121. <script lang="tsx" setup name="snapshotInfoSspConfig">
  122. import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
  123. import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
  124. import {
  125. delSnapshotBulletin,
  126. getSnapshotBulletinBaseData,
  127. getSnapshotBulletinList,
  128. shelfSnapshotBulletin,
  129. submitSnapshotBulletin,
  130. } from '@/api/snapshot/info';
  131. import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
  132. import Other from '@/utils/other';
  133. // 引入组件
  134. const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
  135. const ConfigAdd = defineAsyncComponent(() => import('@/views/snapshot/info/sspConfig/components/Config-add.vue')); // 新增
  136. const ConfigEdit = defineAsyncComponent(() => import('@/views/snapshot/info/sspConfig/components/Config-edit.vue')); // 编辑
  137. const ConfigDetail = defineAsyncComponent(() => import('@/views/snapshot/info/sspConfig/components/Config-detail.vue')); // 详情
  138. // 定义变量内容
  139. const state = reactive<any>({
  140. loading: false,
  141. queryParams: {
  142. // 查询参数
  143. PageIndex: 1,
  144. PageSize: 20,
  145. State: 0, // 审核状态 默认草稿
  146. SnapshotBulletinTypeName: null, // 类型名称
  147. Title: null, // 标题
  148. No: null, // 文档编号
  149. DepartmentName: null, // 部门名称
  150. CreatorName: null, // 发布人
  151. fbTime: [], // 发布时间
  152. BeginCreationTime: null,
  153. EndCreationTime: null,
  154. },
  155. total: 0, // 总条数
  156. });
  157. const gridOptions = reactive<any>({
  158. loading: false,
  159. border: true,
  160. showOverflow: true,
  161. columnConfig: {
  162. resizable: true,
  163. },
  164. scrollY: {
  165. enabled: true,
  166. gt: 100,
  167. },
  168. toolbarConfig: {
  169. zoom: true,
  170. custom: true,
  171. refresh: {
  172. queryMethod: () => {
  173. handleQuery();
  174. },
  175. },
  176. slots: {
  177. buttons: 'toolbar_buttons',
  178. },
  179. },
  180. customConfig: {
  181. storage: true,
  182. },
  183. id: 'snapshotConfigClue',
  184. rowConfig: { isHover: true, height: 30, isCurrent: true, useKey: true },
  185. height: 'auto',
  186. columns: [
  187. {
  188. field: 'snapshotBulletinTypeName',
  189. title: '类别名称',
  190. width: 150,
  191. },
  192. {
  193. field: 'title',
  194. title: '标题',
  195. minWidth: 200,
  196. slots: {
  197. default: ({ row }) => {
  198. return (
  199. <el-button link type="primary" onClick={() => onDetail(row)}>
  200. {row.title}
  201. </el-button>
  202. );
  203. },
  204. },
  205. },
  206. {
  207. field: 'no',
  208. title: '文档编码',
  209. width: 100,
  210. },
  211. {
  212. field: 'readedNum',
  213. title: '阅读次数',
  214. width: 100,
  215. },
  216. {
  217. field: 'departmentName',
  218. title: '部门名称',
  219. width: 140,
  220. },
  221. {
  222. field: 'creatorName',
  223. title: '发布人',
  224. width: 120,
  225. },
  226. {
  227. field: 'bulletinTime',
  228. title: '发布时间',
  229. width: 160,
  230. formatter: 'formatDate',
  231. },
  232. {
  233. field: 'isOpen',
  234. title: '是否公开',
  235. width: 100,
  236. slots: {
  237. default: ({ row }) => {
  238. return row.isOpen ? '是' : '否';
  239. },
  240. },
  241. },
  242. {
  243. field: 'isOpenWebsite',
  244. title: '网站公开',
  245. width: 100,
  246. slots: {
  247. default: ({ row }) => {
  248. return row.isOpenWebsite ? '是' : '否';
  249. },
  250. },
  251. },
  252. {
  253. field: 'isWeChat',
  254. title: '微信公开',
  255. width: 100,
  256. slots: {
  257. default: ({ row }) => {
  258. return row.isWeChat ? '是' : '否';
  259. },
  260. },
  261. },
  262. {
  263. field: 'isWeibo',
  264. title: '微博公开',
  265. width: 100,
  266. slots: {
  267. default: ({ row }) => {
  268. return row.isWeibo ? '是' : '否';
  269. },
  270. },
  271. },
  272. {
  273. field: 'bulletinStateText',
  274. title: '审批状态',
  275. width: 100,
  276. },
  277. { title: '操作', width: 200, fixed: 'right', showOverflow: false, align: 'center', slots: { default: 'action' } },
  278. ],
  279. data: [],
  280. });
  281. /** 搜索按钮操作 节流操作 */
  282. const handleQuery = () => {
  283. state.queryParams.PageIndex = 1;
  284. queryList();
  285. };
  286. // 获取参数列表
  287. const requestParams = ref<EmptyObjectType>({});
  288. const queryList = () => {
  289. state.loading = true;
  290. gridOptions.loading = true;
  291. requestParams.value = Other.deepClone(state.queryParams);
  292. requestParams.value.BeginCreationTime = state.queryParams.fbTime === null ? null : state.queryParams.fbTime[0]; // 受理时间
  293. requestParams.value.EndCreationTime = state.queryParams.fbTime === null ? null : state.queryParams.fbTime[1];
  294. Reflect.deleteProperty(requestParams.value, 'fbTime'); // 删除无用的参数
  295. getSnapshotBulletinList(requestParams.value)
  296. .then((res) => {
  297. state.loading = false;
  298. gridOptions.data = res.result.items ?? [];
  299. state.total = res.result.total ?? 0;
  300. gridOptions.loading = false;
  301. })
  302. .finally(() => {
  303. state.loading = false;
  304. gridOptions.loading = false;
  305. });
  306. };
  307. // 重置表单
  308. const drawerRuleFormRef = ref<RefType>();
  309. const ruleFormRef = ref<any>(null); // 表单ref
  310. const drawer = ref(false);
  311. const resetQuery = (formEl: FormInstance | undefined) => {
  312. if (!formEl) return;
  313. formEl.resetFields();
  314. ruleFormRef.value?.resetFields();
  315. queryList();
  316. };
  317. // 新增
  318. const configAddRef = ref<RefType>();
  319. const onAdd = () => {
  320. configAddRef.value.openDialog();
  321. };
  322. // 编辑
  323. const configEditRef = ref<RefType>();
  324. const onEdit = (row: any) => {
  325. configEditRef.value.openDialog(row.id);
  326. };
  327. // 删除
  328. const onDelete = (row: any) => {
  329. ElMessageBox.confirm(`您确定要删除:【${row.title}】,是否继续?`, '提示', {
  330. confirmButtonText: '确认',
  331. cancelButtonText: '取消',
  332. type: 'warning',
  333. draggable: true,
  334. cancelButtonClass: 'default-button',
  335. autofocus: false,
  336. })
  337. .then(() => {
  338. delSnapshotBulletin(row.id).then(() => {
  339. ElMessage.success('操作成功');
  340. queryList();
  341. });
  342. })
  343. .catch(() => {});
  344. };
  345. // 提交
  346. const onCommit = (row: any) => {
  347. ElMessageBox.confirm(`您确定要提交审批:【${row.title}】,是否继续?`, '提示', {
  348. confirmButtonText: '确认',
  349. cancelButtonText: '取消',
  350. type: 'warning',
  351. draggable: true,
  352. cancelButtonClass: 'default-button',
  353. autofocus: false,
  354. })
  355. .then(() => {
  356. submitSnapshotBulletin({ id: row.id }).then(() => {
  357. ElMessage.success('操作成功');
  358. queryList();
  359. });
  360. })
  361. .catch(() => {});
  362. };
  363. // 上架
  364. const onShelfFn = (row: any) => {
  365. ElMessageBox.confirm(`您确定要上架:【${row.title}】,是否继续?`, '提示', {
  366. confirmButtonText: '确认',
  367. cancelButtonText: '取消',
  368. type: 'warning',
  369. draggable: true,
  370. cancelButtonClass: 'default-button',
  371. autofocus: false,
  372. })
  373. .then(() => {
  374. shelfSnapshotBulletin({ id: row.id, isArrive: true }).then(() => {
  375. ElMessage.success('操作成功');
  376. queryList();
  377. });
  378. })
  379. .catch(() => {});
  380. };
  381. // 下架
  382. const offShelfFn = (row: any) => {
  383. ElMessageBox.confirm(`您确定要下架:【${row.title}】,是否继续?`, '提示', {
  384. confirmButtonText: '确认',
  385. cancelButtonText: '取消',
  386. type: 'warning',
  387. draggable: true,
  388. cancelButtonClass: 'default-button',
  389. autofocus: false,
  390. })
  391. .then(() => {
  392. shelfSnapshotBulletin({ id: row.id, isArrive: false }).then(() => {
  393. ElMessage.success('操作成功');
  394. queryList();
  395. });
  396. })
  397. .catch(() => {});
  398. };
  399. // 查看详情
  400. const configDetailRef = ref<RefType>();
  401. const onDetail = (row: any) => {
  402. configDetailRef.value.openDialog(row.id);
  403. };
  404. // 获取基础信息
  405. const bulletinState = ref<EmptyArrayType>([]);
  406. const getBaseInfo = async () => {
  407. try {
  408. const { result } = await getSnapshotBulletinBaseData();
  409. bulletinState.value = result.bulletinState;
  410. } catch (e) {
  411. console.log(e);
  412. }
  413. };
  414. // 页面加载时
  415. onMounted(() => {
  416. queryList();
  417. getBaseInfo();
  418. });
  419. </script>