From beca65f4d01ca07c358102a35b949c2a4f277afe Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期三, 24 五月 2023 10:36:27 +0800
Subject: [PATCH] 增加车间监控界面
---
src/views/dry/DryHerbTypeList.vue | 595 ++++++++++++++++++++++++++++++-----------------------------
1 files changed, 300 insertions(+), 295 deletions(-)
diff --git a/src/views/dry/DryHerbTypeList.vue b/src/views/dry/DryHerbTypeList.vue
index 2dd3d3e..04ed486 100644
--- a/src/views/dry/DryHerbTypeList.vue
+++ b/src/views/dry/DryHerbTypeList.vue
@@ -1,310 +1,315 @@
<template>
- <div>
- <!--寮曠敤琛ㄦ牸-->
- <BasicTable @register="registerTable" :rowSelection="rowSelection" :expandedRowKeys="expandedRowKeys"
- @expand="handleExpand" @fetch-success="onFetchSuccess">
- <!--鎻掓Ы:table鏍囬-->
- <template #tableTitle>
- <a-button type="primary" @click="handleCreate" preIcon="ant-design:plus-outlined"> 鏂板</a-button>
- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 瀵煎嚭</a-button>
- <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">瀵煎叆</j-upload-button>
+ <div>
+ <!--寮曠敤琛ㄦ牸-->
+ <BasicTable
+ @register="registerTable"
+ :rowSelection="rowSelection"
+ :expandedRowKeys="expandedRowKeys"
+ @expand="handleExpand"
+ @fetch-success="onFetchSuccess"
+ >
+ <!--鎻掓Ы:table鏍囬-->
+ <template #tableTitle>
+ <a-button type="primary" @click="handleCreate" preIcon="ant-design:plus-outlined"> 鏂板</a-button>
+ <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 瀵煎嚭</a-button>
+ <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">瀵煎叆</j-upload-button>
- <a-dropdown v-if="selectedRowKeys.length > 0">
- <template #overlay>
- <a-menu>
- <a-menu-item key="1" @click="batchHandleDelete">
- <Icon icon="ant-design:delete-outlined" />
- 鍒犻櫎
- </a-menu-item>
- </a-menu>
- </template>
- <a-button>鎵归噺鎿嶄綔
- <Icon icon="ant-design:down-outlined" />
- </a-button>
- </a-dropdown>
- </template>
- <!--鎿嶄綔鏍�-->
- <template #action="{ record }">
- <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
- </template>
- <!--瀛楁鍥炴樉鎻掓Ы-->
- <template #htmlSlot="{ text }">
- <div v-html="text"></div>
- </template>
- <!--鐪佸競鍖哄瓧娈靛洖鏄炬彃妲�-->
- <template #pcaSlot="{ text }">
- {{ getAreaTextByCode(text) }}
- </template>
- <template #fileSlot="{ text }">
- <span v-if="!text" style="font-size: 12px; font-style: italic">鏃犳枃浠�</span>
- <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small"
- @click="downloadFile(text)">涓嬭浇</a-button>
- </template>
- </BasicTable>
- <!--瀛楀吀寮圭獥-->
- <DryHerbTypeModal @register="registerModal" @success="handleSuccess" />
- </div>
+ <a-dropdown v-if="selectedRowKeys.length > 0">
+ <template #overlay>
+ <a-menu>
+ <a-menu-item key="1" @click="batchHandleDelete">
+ <Icon icon="ant-design:delete-outlined" />
+ 鍒犻櫎
+ </a-menu-item>
+ </a-menu>
+ </template>
+ <a-button
+ >鎵归噺鎿嶄綔
+ <Icon icon="ant-design:down-outlined" />
+ </a-button>
+ </a-dropdown>
+ </template>
+ <!--鎿嶄綔鏍�-->
+ <template #action="{ record }">
+ <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+ </template>
+ <!--瀛楁鍥炴樉鎻掓Ы-->
+ <template #htmlSlot="{ text }">
+ <div v-html="text"></div>
+ </template>
+ <!--鐪佸競鍖哄瓧娈靛洖鏄炬彃妲�-->
+ <template #pcaSlot="{ text }">
+ {{ getAreaTextByCode(text) }}
+ </template>
+ <template #fileSlot="{ text }">
+ <span v-if="!text" style="font-size: 12px; font-style: italic">鏃犳枃浠�</span>
+ <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">涓嬭浇</a-button>
+ </template>
+ </BasicTable>
+ <!--瀛楀吀寮圭獥-->
+ <DryHerbTypeModal @register="registerModal" @success="handleSuccess" />
+ </div>
</template>
<script lang="ts" name="dry-dryHerbType" setup>
-//ts璇硶
-import { ref, unref } from 'vue'
-import { batchDeleteDryHerbType, deleteDryHerbType, getChildList, getChildListBatch, getExportUrl, getImportUrl, list } from './api/DryHerbType.api'
-import DryHerbTypeModal from './components/DryHerbTypeModal.vue'
-import { columns, searchFormSchema } from './dataDefine/DryHerbType.data'
-import { useModal } from '/@/components/Modal'
-import { BasicTable, TableAction } from '/@/components/Table'
-import { useListPage } from '/@/hooks/system/useListPage'
-import { downloadFile } from '/@/utils/common/renderUtils'
-const expandedRowKeys = ref([])
-//瀛楀吀model
-const [registerModal, { openModal }] = useModal()
-//娉ㄥ唽table鏁版嵁
-const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
- tableProps: {
- api: list,
- title: '鑽潗鍒嗙被',
- columns,
- canResize: false,
- formConfig: {
- //labelWidth: 120,
- schemas: searchFormSchema,
- autoSubmitOnEnter: true,
- showAdvancedButton: true,
- fieldMapToNumber: [],
- fieldMapToTime: [],
- },
- actionColumn: {
- width: 240,
- fixed: 'right',
- },
- },
- exportConfig: {
- name: '鑽潗鍒嗙被',
- url: getExportUrl,
- },
- importConfig: {
- url: getImportUrl,
- success: importSuccess,
- },
-})
+ //ts璇硶
+ import { ref, unref } from 'vue'
+ import { batchDeleteDryHerbType, deleteDryHerbType, getChildList, getChildListBatch, getExportUrl, getImportUrl, list } from './api/DryHerbType.api'
+ import DryHerbTypeModal from './components/DryHerbTypeModal.vue'
+ import { columns, searchFormSchema } from './dataDefine/DryHerbType.data'
+ import { useModal } from '/@/components/Modal'
+ import { BasicTable, TableAction } from '/@/components/Table'
+ import { useListPage } from '/@/hooks/system/useListPage'
+ import { downloadFile } from '/@/utils/common/renderUtils'
+ const expandedRowKeys = ref([])
+ //瀛楀吀model
+ const [registerModal, { openModal }] = useModal()
+ //娉ㄥ唽table鏁版嵁
+ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+ tableProps: {
+ api: list,
+ title: '鑽潗鍒嗙被',
+ columns,
+ canResize: false,
+ formConfig: {
+ //labelWidth: 120,
+ schemas: searchFormSchema,
+ autoSubmitOnEnter: true,
+ showAdvancedButton: true,
+ fieldMapToNumber: [],
+ fieldMapToTime: [],
+ },
+ actionColumn: {
+ width: 240,
+ fixed: 'right',
+ },
+ },
+ exportConfig: {
+ name: '鑽潗鍒嗙被',
+ url: getExportUrl,
+ },
+ importConfig: {
+ url: getImportUrl,
+ success: importSuccess,
+ },
+ })
-const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
- tableContext
+ const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
+ tableContext
-/**
- * 鏂板浜嬩欢
- */
-function handleCreate() {
- openModal(true, {
- isUpdate: false,
- })
-}
+ /**
+ * 鏂板浜嬩欢
+ */
+ function handleCreate() {
+ openModal(true, {
+ isUpdate: false,
+ })
+ }
-/**
- * 缂栬緫浜嬩欢
- */
-async function handleEdit(record) {
- openModal(true, {
- record,
- isUpdate: true,
- })
-}
+ /**
+ * 缂栬緫浜嬩欢
+ */
+ async function handleEdit(record) {
+ openModal(true, {
+ record,
+ isUpdate: true,
+ })
+ }
-/**
- * 璇︽儏
- */
-async function handleDetail(record) {
- openModal(true, {
- record,
- isUpdate: true,
- hideFooter: true,
- })
-}
+ /**
+ * 璇︽儏
+ */
+ async function handleDetail(record) {
+ openModal(true, {
+ record,
+ isUpdate: true,
+ hideFooter: true,
+ })
+ }
-/**
- * 鍒犻櫎浜嬩欢
- */
-async function handleDelete(record) {
- await deleteDryHerbType({ id: record.id }, importSuccess)
-}
+ /**
+ * 鍒犻櫎浜嬩欢
+ */
+ async function handleDelete(record) {
+ await deleteDryHerbType({ id: record.id }, importSuccess)
+ }
-/**
- * 鎵归噺鍒犻櫎浜嬩欢
- */
-async function batchHandleDelete() {
- const ids = selectedRowKeys.value.filter((item) => !item.includes('loading'))
- await batchDeleteDryHerbType({ id: ids }, importSuccess)
-}
-/**
- * 瀵煎叆
- */
-function importSuccess() {
- ; (selectedRowKeys.value = []) && reload()
-}
-/**
- * 娣诲姞涓嬬骇
- */
-function handleAddSub(record) {
- openModal(true, {
- record,
- isUpdate: false,
- })
-}
-/**
- * 鎴愬姛鍥炶皟
- */
-async function handleSuccess({ isUpdate, values, expandedArr, changeParent }) {
- if (isUpdate) {
- if (changeParent) {
- reload()
- } else {
- // 缂栬緫鍥炶皟
- updateTableDataRecord(values.id, values)
- }
- } else {
- if (!values['id'] || !values['pid']) {
- //鏂板鏍硅妭鐐�
- reload()
- } else {
- //鏂板瀛愰泦
- expandedRowKeys.value = []
- for (let key of unref(expandedArr)) {
- await expandTreeNode(key)
- }
- }
- }
-}
+ /**
+ * 鎵归噺鍒犻櫎浜嬩欢
+ */
+ async function batchHandleDelete() {
+ const ids = selectedRowKeys.value.filter((item) => !item.includes('loading'))
+ await batchDeleteDryHerbType({ id: ids }, importSuccess)
+ }
+ /**
+ * 瀵煎叆
+ */
+ function importSuccess() {
+ ;(selectedRowKeys.value = []) && reload()
+ }
+ /**
+ * 娣诲姞涓嬬骇
+ */
+ function handleAddSub(record) {
+ openModal(true, {
+ record,
+ isUpdate: false,
+ })
+ }
+ /**
+ * 鎴愬姛鍥炶皟
+ */
+ async function handleSuccess({ isUpdate, values, expandedArr, changeParent }) {
+ if (isUpdate) {
+ if (changeParent) {
+ reload()
+ } else {
+ // 缂栬緫鍥炶皟
+ updateTableDataRecord(values.id, values)
+ }
+ } else {
+ if (!values['id'] || !values['pid']) {
+ //鏂板鏍硅妭鐐�
+ reload()
+ } else {
+ //鏂板瀛愰泦
+ expandedRowKeys.value = []
+ for (let key of unref(expandedArr)) {
+ await expandTreeNode(key)
+ }
+ }
+ }
+ }
-/**
- * 鎺ュ彛璇锋眰鎴愬姛鍚庡洖璋�
- */
-function onFetchSuccess(result) {
- getDataByResult(result.items) && loadDataByExpandedRows()
-}
-/**
- * 鏍规嵁宸插睍寮�鐨勮鏌ヨ鏁版嵁锛堢敤浜庝繚瀛樺悗鍒锋柊鏃跺紓姝ュ姞杞藉瓙绾х殑鏁版嵁锛�
- */
-async function loadDataByExpandedRows() {
- if (unref(expandedRowKeys).length > 0) {
- const res = await getChildListBatch({ parentIds: unref(expandedRowKeys).join(',') })
- if (res.success && res.result.records.length > 0) {
- //宸插睍寮�鐨勬暟鎹壒閲忓瓙鑺傜偣
- let records = res.result.records
- const listMap = new Map()
- for (let item of records) {
- let pid = item['pid']
- if (unref(expandedRowKeys).includes(pid)) {
- let mapList = listMap.get(pid)
- if (mapList == null) {
- mapList = []
- }
- mapList.push(item)
- listMap.set(pid, mapList)
- }
- }
- let childrenMap = listMap
- let fn = (list) => {
- if (list) {
- list.forEach((data) => {
- if (unref(expandedRowKeys).includes(data.id)) {
- data.children = getDataByResult(childrenMap.get(data.id))
- fn(data.children)
- }
- })
- }
- }
- fn(getDataSource())
- }
- }
-}
-/**
- * 澶勭悊鏁版嵁闆�
- */
-function getDataByResult(result) {
- if (result && result.length > 0) {
- return result.map((item) => {
- //鍒ゆ柇鏄惁鏍囪浜嗗甫鏈夊瓙鑺傜偣
- if (item['hasChild'] == '1') {
- let loadChild = { id: item.id + '_loadChild', name: 'loading...', isLoading: true }
- item.children = [loadChild]
- }
- return item
- })
- }
-}
-/**
- *鏍戣妭鐐瑰睍寮�鍚堝苟
- * */
-async function handleExpand(expanded, record) {
- // 鍒ゆ柇鏄惁鏄睍寮�鐘舵�侊紝灞曞紑鐘舵��(expanded)骞朵笖瀛樺湪瀛愰泦(children)骞朵笖鏈姞杞借繃(isLoading)鐨勫氨鍘绘煡璇㈠瓙鑺傜偣鏁版嵁
- if (expanded) {
- expandedRowKeys.value.push(record.id)
- if (record.children.length > 0 && !!record.children[0].isLoading) {
- let result = await getChildList({ pid: record.id })
- result = result.records ? result.records : result
- if (result && result.length > 0) {
- record.children = getDataByResult(result)
- } else {
- record.children = null
- record.hasChild = '0'
- }
- }
- } else {
- let keyIndex = expandedRowKeys.value.indexOf(record.id)
- if (keyIndex >= 0) {
- expandedRowKeys.value.splice(keyIndex, 1)
- }
- }
-}
-/**
- *鎿嶄綔琛ㄦ牸鍚庡鐞嗘爲鑺傜偣灞曞紑鍚堝苟
- * */
-async function expandTreeNode(key) {
- let record = findTableDataRecord(key)
- expandedRowKeys.value.push(key)
- let result = await getChildList({ pid: key })
- if (result && result.length > 0) {
- record.children = getDataByResult(result)
- } else {
- record.children = null
- record.hasChild = '0'
- }
- updateTableDataRecord(key, record)
-}
-/**
- * 鎿嶄綔鏍�
- */
-function getTableAction(record) {
- return [
- {
- label: '缂栬緫',
- onClick: handleEdit.bind(null, record),
- },
- {
- label: '娣诲姞涓嬬骇',
- onClick: handleAddSub.bind(null, { pid: record.id }),
- },
- ]
-}
-/**
- * 涓嬫媺鎿嶄綔鏍�
- */
-function getDropDownAction(record) {
- return [
- {
- label: '璇︽儏',
- onClick: handleDetail.bind(null, record),
- },
- {
- label: '鍒犻櫎',
- popConfirm: {
- title: '纭畾鍒犻櫎鍚�?',
- confirm: handleDelete.bind(null, record),
- },
- },
- ]
-}
+ /**
+ * 鎺ュ彛璇锋眰鎴愬姛鍚庡洖璋�
+ */
+ function onFetchSuccess(result) {
+ getDataByResult(result.items) && loadDataByExpandedRows()
+ }
+ /**
+ * 鏍规嵁宸插睍寮�鐨勮鏌ヨ鏁版嵁锛堢敤浜庝繚瀛樺悗鍒锋柊鏃跺紓姝ュ姞杞藉瓙绾х殑鏁版嵁锛�
+ */
+ async function loadDataByExpandedRows() {
+ if (unref(expandedRowKeys).length > 0) {
+ const res = await getChildListBatch({ parentIds: unref(expandedRowKeys).join(',') })
+ if (res.success && res.result.records.length > 0) {
+ //宸插睍寮�鐨勬暟鎹壒閲忓瓙鑺傜偣
+ let records = res.result.records
+ const listMap = new Map()
+ for (let item of records) {
+ let pid = item['pid']
+ if (unref(expandedRowKeys).includes(pid)) {
+ let mapList = listMap.get(pid)
+ if (mapList == null) {
+ mapList = []
+ }
+ mapList.push(item)
+ listMap.set(pid, mapList)
+ }
+ }
+ let childrenMap = listMap
+ let fn = (list) => {
+ if (list) {
+ list.forEach((data) => {
+ if (unref(expandedRowKeys).includes(data.id)) {
+ data.children = getDataByResult(childrenMap.get(data.id))
+ fn(data.children)
+ }
+ })
+ }
+ }
+ fn(getDataSource())
+ }
+ }
+ }
+ /**
+ * 澶勭悊鏁版嵁闆�
+ */
+ function getDataByResult(result) {
+ if (result && result.length > 0) {
+ return result.map((item) => {
+ //鍒ゆ柇鏄惁鏍囪浜嗗甫鏈夊瓙鑺傜偣
+ if (item['hasChild'] == '1') {
+ let loadChild = { id: item.id + '_loadChild', name: 'loading...', isLoading: true }
+ item.children = [loadChild]
+ }
+ return item
+ })
+ }
+ }
+ /**
+ *鏍戣妭鐐瑰睍寮�鍚堝苟
+ * */
+ async function handleExpand(expanded, record) {
+ // 鍒ゆ柇鏄惁鏄睍寮�鐘舵�侊紝灞曞紑鐘舵��(expanded)骞朵笖瀛樺湪瀛愰泦(children)骞朵笖鏈姞杞借繃(isLoading)鐨勫氨鍘绘煡璇㈠瓙鑺傜偣鏁版嵁
+ if (expanded) {
+ expandedRowKeys.value.push(record.id)
+ if (record.children.length > 0 && !!record.children[0].isLoading) {
+ let result = await getChildList({ pid: record.id })
+ result = result.records ? result.records : result
+ if (result && result.length > 0) {
+ record.children = getDataByResult(result)
+ } else {
+ record.children = null
+ record.hasChild = '0'
+ }
+ }
+ } else {
+ let keyIndex = expandedRowKeys.value.indexOf(record.id)
+ if (keyIndex >= 0) {
+ expandedRowKeys.value.splice(keyIndex, 1)
+ }
+ }
+ }
+ /**
+ *鎿嶄綔琛ㄦ牸鍚庡鐞嗘爲鑺傜偣灞曞紑鍚堝苟
+ * */
+ async function expandTreeNode(key) {
+ let record = findTableDataRecord(key)
+ expandedRowKeys.value.push(key)
+ let result = await getChildList({ pid: key })
+ if (result && result.length > 0) {
+ record.children = getDataByResult(result)
+ } else {
+ record.children = null
+ record.hasChild = '0'
+ }
+ updateTableDataRecord(key, record)
+ }
+ /**
+ * 鎿嶄綔鏍�
+ */
+ function getTableAction(record) {
+ return [
+ {
+ label: '缂栬緫',
+ onClick: handleEdit.bind(null, record),
+ },
+ {
+ label: '娣诲姞涓嬬骇',
+ onClick: handleAddSub.bind(null, { pid: record.id }),
+ },
+ ]
+ }
+ /**
+ * 涓嬫媺鎿嶄綔鏍�
+ */
+ function getDropDownAction(record) {
+ return [
+ {
+ label: '璇︽儏',
+ onClick: handleDetail.bind(null, record),
+ },
+ {
+ label: '鍒犻櫎',
+ popConfirm: {
+ title: '纭畾鍒犻櫎鍚�?',
+ confirm: handleDelete.bind(null, record),
+ },
+ },
+ ]
+ }
</script>
<style scoped></style>
--
Gitblit v1.9.3