| | |
| | | <script setup> |
| | | import { getCurrentInstance, ref, computed, reactive } from 'vue'; |
| | | import { useRouter } from "vue-router"; |
| | | import { get, post, postBlob } from '@/utils/request.js' |
| | | import { get, post, postBlob, postForm } from '@/utils/request.js' |
| | | import { message, Modal } from 'ant-design-vue'; |
| | | import { logout } from '@/config.js'; |
| | | import EditView from './edit.vue' |
| | | import { formatMessage } from '@/utils/localeUtils.js'; |
| | | import useTableSearch from '@/utils/tableUtils.jsx'; |
| | | const context = getCurrentInstance()?.appContext.config.globalProperties; |
| | | |
| | | const router = useRouter(); |
| | |
| | | const editChild = ref(null) |
| | | |
| | | let tableData = ref([]); |
| | | getColumns(); |
| | | getPage(); |
| | | |
| | | const columns = [ |
| | | const { |
| | | getColumnSearchProps, |
| | | handleResizeColumn, |
| | | } = useTableSearch(); |
| | | |
| | | const state = reactive({ |
| | | selectedRowKeys: [], |
| | | loading: false, |
| | | columns: [] |
| | | }); |
| | | const hasSelected = computed(() => state.selectedRowKeys.length > 0); |
| | | const start = () => { |
| | | state.loading = true; |
| | | // ajax request after empty completing |
| | | setTimeout(() => { |
| | | state.loading = false; |
| | | state.selectedRowKeys = []; |
| | | }, 1000); |
| | | }; |
| | | const onSelectChange = selectedRowKeys => { |
| | | // console.log('selectedRowKeys changed: ', selectedRowKeys); |
| | | state.selectedRowKeys = selectedRowKeys; |
| | | }; |
| | | |
| | | state.columns = [ |
| | | { |
| | | title: '#ID', |
| | | dataIndex: 'id', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('id'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.tag_id', '所属归类'), |
| | | dataIndex: 'tagId$', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('tagId$'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.matnr', '商品编号'), |
| | | dataIndex: 'matnr', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('matnr'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.maktx', '商品名称'), |
| | | dataIndex: 'maktx', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('maktx'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.name', '别名'), |
| | | dataIndex: 'name', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('name'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.specs', '规格'), |
| | | dataIndex: 'specs', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('specs'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.model', '型号'), |
| | | dataIndex: 'model', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('model'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.color', '颜色'), |
| | | dataIndex: 'color', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('color'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.brand', '品牌'), |
| | | dataIndex: 'brand', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('brand'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.unit', '单位'), |
| | | dataIndex: 'unit', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('unit'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.price', '单价'), |
| | | dataIndex: 'price', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('price'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.sku', 'sku'), |
| | | dataIndex: 'sku', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('sku'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.units', '单位量'), |
| | | dataIndex: 'units', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('units'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.barcode', '条码'), |
| | | dataIndex: 'barcode', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('barcode'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.origin', '产地'), |
| | | dataIndex: 'origin', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('origin'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.manu', '厂家'), |
| | | dataIndex: 'manu', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('manu'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.manu_date', '生产日期'), |
| | | dataIndex: 'manuDate', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('manuDate'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.item_num', '品项数'), |
| | | dataIndex: 'itemNum', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('itemNum'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.weight', '重量'), |
| | | dataIndex: 'weight', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('weight'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.length', '长度'), |
| | | dataIndex: 'length', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('length'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.volume', '体积'), |
| | | dataIndex: 'volume', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('volume'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.three_code', '三方编码'), |
| | | dataIndex: 'threeCode', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('threeCode'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.supp', '供应商'), |
| | | dataIndex: 'supp', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('supp'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.supp_code', '供应商编码'), |
| | | dataIndex: 'suppCode', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('suppCode'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.dead_time', '保质期'), |
| | | dataIndex: 'deadTime', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('deadTime'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.safeStockLimit', '安全库存上限'), |
| | | dataIndex: 'safeStockLimit', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('safeStockLimit'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.safeStockMinimum', '安全库存下限'), |
| | | dataIndex: 'safeStockMinimum', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('safeStockMinimum'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.validity', '有效期'), |
| | | dataIndex: 'validity', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('validity'), |
| | | }, |
| | | |
| | | { |
| | |
| | | dataIndex: 'uuid', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('uuid'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.flag', '标识'), |
| | | dataIndex: 'flag', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('flag'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.sort', '排序'), |
| | | dataIndex: 'sort', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('sort'), |
| | | }, |
| | | { |
| | | title: formatMessage('db.man_mat.status', '状态'), |
| | | dataIndex: 'status$', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('status$'), |
| | | }, |
| | | // { |
| | | // title: formatMessage('db.man_mat.create_time', '添加时间'), |
| | |
| | | dataIndex: 'memo', |
| | | width: 140, |
| | | ellipsis: true, |
| | | ...getColumnSearchProps('memo'), |
| | | }, |
| | | |
| | | { |
| | | title: formatMessage('common.operation', '操作'), |
| | | name: 'oper', |
| | | dataIndex: 'oper', |
| | | key: 'oper', |
| | | width: 140, |
| | | }, |
| | | ]; |
| | | |
| | | const state = reactive({ |
| | | selectedRowKeys: [], |
| | | loading: false, |
| | | }); |
| | | const hasSelected = computed(() => state.selectedRowKeys.length > 0); |
| | | const start = () => { |
| | | state.loading = true; |
| | | // ajax request after empty completing |
| | | setTimeout(() => { |
| | | state.loading = false; |
| | | state.selectedRowKeys = []; |
| | | }, 1000); |
| | | }; |
| | | const onSelectChange = selectedRowKeys => { |
| | | // console.log('selectedRowKeys changed: ', selectedRowKeys); |
| | | state.selectedRowKeys = selectedRowKeys; |
| | | }; |
| | | //加载扩展字段 |
| | | async function getColumns() { |
| | | let fieldResp = await post('/api/matField/list', { |
| | | fieldType: 0 |
| | | }) |
| | | let fieldResult = fieldResp.data; |
| | | let tmp = state.columns; |
| | | if (fieldResult.code == 200) { |
| | | let data = fieldResult.data; |
| | | |
| | | function getPage() { |
| | | data.forEach((item) => { |
| | | tmp.push({ |
| | | title: formatMessage(item.language, item.describe), |
| | | name: item.name, |
| | | dataIndex: item.name, |
| | | key: item.name, |
| | | width: 140, |
| | | }) |
| | | }) |
| | | |
| | | tmp.push({ |
| | | title: formatMessage('common.operation', '操作'), |
| | | name: 'oper', |
| | | dataIndex: 'oper', |
| | | key: 'oper', |
| | | width: 140, |
| | | }) |
| | | |
| | | state.columns = tmp; |
| | | } else if (result.code === 401) { |
| | | message.error(result.msg); |
| | | logout() |
| | | } else { |
| | | message.error(result.msg); |
| | | } |
| | | } |
| | | |
| | | async function getPage() { |
| | | post('/api/mat/page', { |
| | | current: currentPage, |
| | | pageSize: pageSize, |
| | |
| | | getPage() |
| | | } |
| | | |
| | | const matFieldList = ref(null); |
| | | MatFieldQuery(); |
| | | function MatFieldQuery() { |
| | | post('/api/matField/list', {}).then(resp => { |
| | | let result = resp.data; |
| | | matFieldList.value = result.data; |
| | | }) |
| | | } |
| | | |
| | | </script> |
| | | |
| | | <script> |
| | |
| | | <a-table :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }" |
| | | :data-source="tableData.records" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id" |
| | | :pagination="{ total: tableData.total, onChange: onPageChange }" |
| | | :scroll="{ y: 768, scrollToFirstRowOnChange: true }" :columns="columns"> |
| | | :scroll="{ y: 768, scrollToFirstRowOnChange: true }" :columns="state.columns" @resizeColumn="handleResizeColumn"> |
| | | <template #bodyCell="{ column, text, record }"> |
| | | <template v-if="column.dataIndex === 'oper'"> |
| | | <div style="display: flex;justify-content: space-evenly;"> |