kpi-indi-list.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452
  1. <template>
  2. <div :class="$style.indiList">
  3. <a-card>
  4. <!-- 高级搜索组件 -->
  5. <audit-advanced-query
  6. :expand="expand"
  7. :search-data="formData"
  8. :ref-name="searchform"
  9. :search-style="{
  10. height: '220px',
  11. left: '20px',
  12. top: '70px !important',
  13. width: 'calc(100% - 30px) !important',
  14. margin: 'auto',
  15. }"
  16. :search-fun="handleSearch"
  17. @searchedClick="searchedClick"
  18. >
  19. <template>
  20. <a-col :span="12">
  21. <a-form-model-item :label="'业务分类'" prop="busiClass">
  22. <sd-tree-picker
  23. v-model="formData.busiClass"
  24. single
  25. :load-tree-data="loadTreeData"
  26. :class="$style.treeSelect"
  27. a-select
  28. >
  29. </sd-tree-picker>
  30. </a-form-model-item>
  31. </a-col>
  32. <a-col :span="12">
  33. <a-form-model-item :label="'指标名称'" prop="indiName">
  34. <a-input v-model="formData.indiName" allow-clear />
  35. </a-form-model-item>
  36. </a-col>
  37. <a-col :span="12">
  38. <a-form-model-item :label="'指标状态'" prop="indiStatus">
  39. <a-select v-model="formData.indiStatus" :options="optionsArray.optionsStatus" />
  40. </a-form-model-item>
  41. </a-col>
  42. <a-col :span="12">
  43. <a-form-model-item :label="'指标时间维度'" prop="indiFrequency">
  44. <a-select v-model="formData.indiFrequency" :options="optionsArray.optionsFrequency" />
  45. </a-form-model-item>
  46. </a-col>
  47. <a-col :span="12">
  48. <a-form-model-item :label="'监测范围'" prop="monitorRange">
  49. <a-select v-model="formData.monitorRange" :options="optionsArray.optionsRange" />
  50. </a-form-model-item>
  51. </a-col>
  52. <a-col :span="12">
  53. <a-form-model-item :label="'监测单位'" prop="monitorDept">
  54. <sd-group-picker v-model="formData.monitorDept" :read-only="false" />
  55. </a-form-model-item>
  56. </a-col>
  57. </template>
  58. </audit-advanced-query>
  59. <!-- 列表组件 -->
  60. <sd-data-table
  61. ref="dataTable"
  62. :class="$style.dataTable"
  63. :row-key="'id'"
  64. :filter-expressions="expressions"
  65. :columns="columns"
  66. :actions="actions"
  67. form-id="kpiIndiDef"
  68. :data-url="dataurl"
  69. :show-selection="
  70. (record) => {
  71. // 只有主单位行有复选框
  72. return !record.isChildren
  73. }
  74. "
  75. :modal-props="{ class: 'noBottom' }"
  76. :search-fields="['indiName']"
  77. :show-advance-query="true"
  78. :process-res="processRes"
  79. @searchbtnClick="searchbtnClick"
  80. >
  81. <div slot="islink" slot-scope="text, record">
  82. <a :title="text" @click="rowClick(record)">{{ text }}</a>
  83. </div>
  84. </sd-data-table>
  85. <!-- 下发报送 -->
  86. <kpi-sendtask-form :visible="visible" :indi-info="indiInfo"></kpi-sendtask-form>
  87. </a-card>
  88. </div>
  89. </template>
  90. <script>
  91. import { message, Modal } from 'ant-design-vue'
  92. import axios from '@/common/services/axios-instance'
  93. import crossWindowWatcher from '@/common/services/cross-window-watcher'
  94. import TableActionTypes from '@/common/services/table-action-types'
  95. import auditAdvancedQueryMixins from '@product/iam/components/audit-advanced-query-mixins'
  96. import auditAdvancedQuery from '../../components/audit-advanced-query.vue'
  97. import auditAdvancedGroupMixins from '../../components/audit-advanced-group-mixins'
  98. import KpiService from '../kpi-service'
  99. import kpiSendtaskForm from './kpi-sendtask-form.vue'
  100. import components from './_import-components/kpi-indi-list-import'
  101. export default {
  102. name: 'KpiIndiList',
  103. metaInfo: {
  104. title: '指标定义列表',
  105. },
  106. components: {
  107. ...components,
  108. auditAdvancedQuery,
  109. kpiSendtaskForm,
  110. },
  111. mixins: [auditAdvancedQueryMixins, auditAdvancedGroupMixins],
  112. data() {
  113. return {
  114. visible: false,
  115. indiInfo: {}, // 下发指标信息
  116. catvisible: false,
  117. treeparams: {
  118. configId: 101,
  119. },
  120. searchform: 'searchform',
  121. expressions: [],
  122. formData: {
  123. indiName: '',
  124. busiClass: '',
  125. indiStatus: '',
  126. indiFrequency: '',
  127. monitorRange: '',
  128. monitorDept: '',
  129. },
  130. optionsArray: {
  131. optionsFrequency: [], // 指标时间维度下拉选项
  132. optionsStatus: [], // 指标状态下拉选项
  133. optionsRange: [], // 监测范围
  134. },
  135. dataurl: 'api/xcoa-mobile/v1/kpi-indi-def/list',
  136. columns: [
  137. {
  138. title: '序号',
  139. customRender: (text, record, index) => `${index + 1}`,
  140. width: '80px',
  141. },
  142. {
  143. title: '业务分类',
  144. dataIndex: 'busiClassName',
  145. width: '150px',
  146. },
  147. {
  148. title: '指标名称',
  149. dataIndex: 'indiName',
  150. width: '150px',
  151. scopedSlots: { customRender: 'islink' },
  152. },
  153. {
  154. title: '指标编号',
  155. dataIndex: 'indiNo',
  156. },
  157. {
  158. title: '指标状态',
  159. dataIndex: 'indiStatus',
  160. },
  161. {
  162. title: '指标时间维度',
  163. dataIndex: 'indiFrequency',
  164. },
  165. {
  166. title: '监测范围',
  167. dataIndex: 'monitorRange',
  168. },
  169. {
  170. title: '监测单位',
  171. dataIndex: 'monitorDeptStr',
  172. },
  173. {
  174. title: '报送部门',
  175. dataIndex: 'submitterDeptStr',
  176. },
  177. {
  178. title: '是否本单位',
  179. dataIndex: 'izSelfStr',
  180. sdHidden: true,
  181. },
  182. ],
  183. actions: [
  184. {
  185. label: '删除',
  186. id: 'delete',
  187. permission: 'kpiIndiDef-delete',
  188. type: TableActionTypes.batch,
  189. callback: (keys) => {
  190. this.deleteRows(keys)
  191. },
  192. },
  193. {
  194. label: '新建',
  195. type: TableActionTypes.primary, // 新建按钮,不需要回调,自动处理
  196. permission: 'kpiIndiDef-create', // 权限控制
  197. callback: () => {
  198. const url = '/kpi-indi-form' // 新页面要打开的路由地址
  199. crossWindowWatcher.waitForChanged(url).then((refreshFlag) => {
  200. if (refreshFlag) {
  201. // 这里写或者调刷新的方法
  202. this.refresh()
  203. }
  204. })
  205. },
  206. },
  207. {
  208. label: '下发报送任务',
  209. id: 'sendtask',
  210. permission: null,
  211. callback: () => {
  212. const selectrow = this.$refs.dataTable.getSelectedRows()
  213. if (selectrow.length === 1) {
  214. this.indiInfo = selectrow[0]
  215. this.visible = true
  216. } else {
  217. alert('请选择一条数据进行下发')
  218. }
  219. },
  220. },
  221. ],
  222. }
  223. },
  224. mounted() {
  225. // 获取数据字典-状态
  226. this.getDictionary('STATUS', 'optionsStatus')
  227. // 获取数据字典-指标时间维度
  228. this.getDictionary('KPI_FREQUENCY', 'optionsFrequency')
  229. // 获取数据字典-监测范围
  230. this.getDictionary('MONITOR_RANGE', 'optionsRange')
  231. },
  232. methods: {
  233. // 数据返回后,整理response对象
  234. processRes(res) {
  235. if (res.data) {
  236. res.data.forEach((item) => {
  237. // 判断监测单位是否有下级节点
  238. if (item.monitorDepts[0]) {
  239. item.children = []
  240. // 如果只有子级,则首级监测单位报送部门显示为空
  241. if (item.izSelfStr.indexOf('1') === -1) {
  242. item.monitorDeptStr = '' // 监测单位
  243. item.submitterDeptStr = '' // 报送部门
  244. }
  245. // 循环监测单位
  246. item.monitorDepts.forEach((mitem, mindex) => {
  247. if (mitem.izSelf === '0') {
  248. // 子级
  249. item.children.push({
  250. id: item.id + '_' + mindex + 1,
  251. monitorDeptStr: mitem.monitorDeptName,
  252. submitterDeptStr: item.submitterDepts[mindex].submitterDeptName,
  253. isChildren: true,
  254. })
  255. } else {
  256. // 首级
  257. item.monitorDeptStr = mitem.monitorDeptName // 监测单位
  258. item.submitterDeptStr = item.submitterDepts[mindex].submitterDeptName // 报送部门
  259. }
  260. })
  261. }
  262. })
  263. }
  264. return res
  265. },
  266. mapCategoryItems(items) {
  267. return (items || []).map((item) => {
  268. const result = {
  269. id: item.id + '',
  270. name: item.text,
  271. // checkable: true,
  272. isLeaf: item.leaf,
  273. checkable: !item.expandable,
  274. }
  275. return result
  276. })
  277. },
  278. // 获取用于选择的业务类型分类树
  279. loadTreeData(id) {
  280. const topDepId = !id ? 0 : id
  281. const params = {
  282. type: this.treeparams.type,
  283. }
  284. return KpiService.getCategoryTree(topDepId, this.treeparams, params)
  285. .then((res) => {
  286. const treeNode = res.data
  287. return this.mapCategoryItems(treeNode)
  288. })
  289. .catch((e) => {
  290. message.error({ content: '应用类型获取失败' })
  291. })
  292. },
  293. // 获取数据字典
  294. getDictionary(id, fieldName) {
  295. return KpiService.getDictionary(id)
  296. .then((res) => {
  297. if (res[0]) {
  298. res.forEach((item) => {
  299. this.optionsArray[fieldName].push({
  300. label: item.name,
  301. value: item.id,
  302. })
  303. })
  304. }
  305. })
  306. .catch((e) => {
  307. message.error({ content: '数据字典获取失败' })
  308. })
  309. },
  310. // 开关点击事件
  311. switchClick(record) {},
  312. clearSelection() {
  313. this.$refs.sjzlTable.clearSelection()
  314. },
  315. // 刷新列表
  316. refresh() {
  317. this.$refs.dataTable.refresh()
  318. },
  319. // 新建、详情打开新页面
  320. rowClick(record) {
  321. const url = '/kpi-indi-form?record=' + record.id // 新页面要打开的路由地址
  322. crossWindowWatcher.waitForChanged(url).then((refreshFlag) => {
  323. if (refreshFlag) {
  324. this.refresh()
  325. }
  326. })
  327. },
  328. // 重置查询
  329. resetForm() {
  330. this.expressions = []
  331. this.formData = {}
  332. },
  333. // 查询
  334. handleSearch() {
  335. this.expressions = []
  336. // 业务分类
  337. if (this.formData.busiClass[0]) {
  338. this.expressions.push({
  339. dataType: 'str',
  340. name: 'busiClassName',
  341. op: 'eq',
  342. stringValue: `${this.formData.busiClass[0].name}`,
  343. })
  344. }
  345. // 指标名称
  346. if (this.formData.indiName) {
  347. this.expressions.push({
  348. dataType: 'str',
  349. name: 'indiName',
  350. op: 'like',
  351. stringValue: `${this.formData.indiName}`,
  352. })
  353. }
  354. // 指标状态
  355. if (this.formData.indiStatus) {
  356. this.expressions.push({
  357. dataType: 'str',
  358. name: 'indiStatus',
  359. op: 'eq',
  360. stringValue: `${this.formData.indiStatus}`,
  361. })
  362. }
  363. // 指标时间维度
  364. if (this.formData.indiFrequency) {
  365. this.expressions.push({
  366. dataType: 'str',
  367. name: 'indiFrequency',
  368. op: 'eq',
  369. stringValue: `${this.formData.indiFrequency}`,
  370. })
  371. }
  372. // 监测范围
  373. if (this.formData.monitorRange) {
  374. this.expressions.push({
  375. dataType: 'str',
  376. name: 'monitorRange',
  377. op: 'eq',
  378. stringValue: `${this.formData.monitorRange}`,
  379. })
  380. }
  381. // 监测单位
  382. if (this.formData.monitorDept[0]) {
  383. let deptnames = ''
  384. this.formData.monitorDept.forEach((item) => {
  385. if (deptnames === '') {
  386. deptnames = item.name
  387. } else {
  388. deptnames = deptnames + ',' + item.name
  389. }
  390. })
  391. this.expressions.push({
  392. dataType: 'str',
  393. name: 'monitorDept',
  394. op: 'eq',
  395. stringValue: `${deptnames}`,
  396. })
  397. }
  398. },
  399. // 删除数据
  400. deleteRows(selectedRowKeys) {
  401. return new Promise((resolve) => {
  402. Modal.confirm({
  403. title: '您确定删除这项内容吗?',
  404. content: '删除这条数据后,就无法恢复初始的状态。',
  405. okText: '删除',
  406. cancelText: '取消',
  407. okType: 'danger',
  408. onOk: () => {
  409. axios({
  410. url: 'api/framework/v1/page/kpiIndiDef',
  411. method: 'delete',
  412. params: {
  413. ids: selectedRowKeys.join(','),
  414. },
  415. })
  416. .then(() => {
  417. this.$refs.dataTable.clearSelection()
  418. this.$refs.dataTable.refresh()
  419. message.success('删除成功')
  420. })
  421. .finally(resolve)
  422. },
  423. onCancel: () => {
  424. resolve()
  425. },
  426. })
  427. })
  428. },
  429. },
  430. }
  431. </script>
  432. <style module lang="scss">
  433. @use '@/common/design' as *;
  434. .indi-list {
  435. .tree-select {
  436. :global .ant-select {
  437. padding: 0;
  438. }
  439. }
  440. .data-table {
  441. :global .ant-checkbox-wrapper-disabled {
  442. display: none;
  443. }
  444. }
  445. }
  446. </style>