优化代码
parent
57357e320a
commit
cf10261ecf
18
src/App.vue
18
src/App.vue
|
|
@ -8,6 +8,7 @@
|
|||
borderRadius: roundedCornerStyleOpen ? 6 : 2
|
||||
}
|
||||
}"
|
||||
:getPopupContainer="getPopupContainer"
|
||||
>
|
||||
<a-watermark
|
||||
:content="loginUserWatermarkOpen && userInfo ? [userInfo.name, userInfo.account] : undefined"
|
||||
|
|
@ -37,4 +38,21 @@
|
|||
const roundedCornerStyleOpen = computed(() => {
|
||||
return store.roundedCornerStyleOpen
|
||||
})
|
||||
|
||||
const getPopupContainer = (el, dialogContext) => {
|
||||
if (dialogContext) {
|
||||
return dialogContext.getDialogWrap()
|
||||
} else {
|
||||
return document.body
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ant-table-wrapper .ant-table-thead > tr > th {
|
||||
/* 样式规则 */
|
||||
background-color: #f2f6fc; /* 表头背景色 */
|
||||
color: #606266; /* 表头字体颜色 */
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
import { baseRequest } from '@/utils/request'
|
||||
|
||||
const request = (url, ...arg) => baseRequest(`/productcode/producerecords/` + url, ...arg)
|
||||
|
||||
/**
|
||||
* 产品条码历史记录Api接口管理器
|
||||
*
|
||||
* @author Luck
|
||||
* @date 2024/09/15 13:56
|
||||
**/
|
||||
export default {
|
||||
// 获取产品条码历史记录分页
|
||||
produceBarcodeHistoryPage(data) {
|
||||
return request('page', data, 'get')
|
||||
},
|
||||
// 提交产品条码历史记录表单 edit为true时为编辑，默认为新增
|
||||
produceBarcodeHistorySubmitForm(data, edit = false) {
|
||||
return request(edit ? 'edit' : 'add', data)
|
||||
},
|
||||
// 删除产品条码历史记录
|
||||
produceBarcodeHistoryDelete(data) {
|
||||
return request('delete', data)
|
||||
},
|
||||
// 获取产品条码历史记录详情
|
||||
produceBarcodeHistoryDetail(data) {
|
||||
return request('detail', data, 'get')
|
||||
},
|
||||
// 获取产品条码历史记录详情
|
||||
produceBarcodeHistoryAgainExport(data) {
|
||||
return request('againExport', data, 'get', {
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { baseRequest } from '@/utils/request'
|
||||
|
||||
const request = (url, ...arg) => baseRequest(`/productcode/config/` + url, ...arg)
|
||||
|
||||
/**
|
||||
* 产码配置Api接口管理器
|
||||
*
|
||||
* @author luojun
|
||||
* @date 2024/08/31 17:15
|
||||
**/
|
||||
export default {
|
||||
// 获取产码配置分页
|
||||
productCodeConfigPage(data) {
|
||||
return request('page', data, 'get')
|
||||
},
|
||||
// 获取产码配置列表
|
||||
productCodeConfigList(data) {
|
||||
return request('list', data, 'get')
|
||||
},
|
||||
// 提交产码配置表单 edit为true时为编辑，默认为新增
|
||||
productCodeConfigSubmitForm(data, edit = false) {
|
||||
return request(edit ? 'edit' : 'add', data)
|
||||
},
|
||||
// 删除产码配置
|
||||
productCodeConfigDelete(data) {
|
||||
return request('delete', data)
|
||||
},
|
||||
// 获取产码配置详情
|
||||
productCodeConfigDetail(data) {
|
||||
return request('detail', data, 'get')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { baseRequest } from '@/utils/request'
|
||||
|
||||
const request = (url, ...arg) => baseRequest(`/productcode/element/` + url, ...arg)
|
||||
|
||||
/**
|
||||
* 产码配置元素表Api接口管理器
|
||||
*
|
||||
* @author luojun
|
||||
* @date 2024/08/31 16:14
|
||||
**/
|
||||
export default {
|
||||
// 获取产码配置元素表分页
|
||||
productCodeConfigElementPage(data) {
|
||||
return request('page', data, 'get')
|
||||
},
|
||||
// 获取产码配置元素表列表
|
||||
productCodeConfigElementList(data) {
|
||||
return request('list', data, 'get')
|
||||
},
|
||||
// 提交产码配置元素表表单 edit为true时为编辑，默认为新增
|
||||
productCodeConfigElementSubmitForm(data, edit = false) {
|
||||
return request(edit ? 'edit' : 'add', data)
|
||||
},
|
||||
// 删除产码配置元素表
|
||||
productCodeConfigElementDelete(data) {
|
||||
return request('delete', data)
|
||||
},
|
||||
// 获取产码配置元素表详情
|
||||
productCodeConfigElementDetail(data) {
|
||||
return request('detail', data, 'get')
|
||||
},
|
||||
// 批量保存码元素
|
||||
productCodeConfigElementBatchSave(data) {
|
||||
return request('batchSave', data, 'post')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { baseRequest } from '@/utils/request'
|
||||
|
||||
const request = (url, ...arg) => baseRequest(`/productcode/packageconfig/` + url, ...arg)
|
||||
|
||||
/**
|
||||
* 产码码包配置Api接口管理器
|
||||
*
|
||||
* @author luojun
|
||||
* @date 2024/08/31 19:31
|
||||
**/
|
||||
export default {
|
||||
// 获取产码码包配置分页
|
||||
productCodePackageConfigPage(data) {
|
||||
return request('page', data, 'get')
|
||||
},
|
||||
// 获取产码码包配置列表
|
||||
productCodePackageConfigList(data) {
|
||||
return request('list', data, 'get')
|
||||
},
|
||||
// 提交产码码包配置表单 edit为true时为编辑，默认为新增
|
||||
productCodePackageConfigSubmitForm(data, edit = false) {
|
||||
return request(edit ? 'edit' : 'add', data)
|
||||
},
|
||||
// 删除产码码包配置
|
||||
productCodePackageConfigDelete(data) {
|
||||
return request('delete', data)
|
||||
},
|
||||
// 获取产码码包配置详情
|
||||
productCodePackageConfigDetail(data) {
|
||||
return request('detail', data, 'get')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import { baseRequest } from '@/utils/request'
|
||||
|
||||
const request = (url, ...arg) => baseRequest(`/productcode/scheme/` + url, ...arg)
|
||||
const requestCode = (url, ...arg) => baseRequest(`/productcode/controller/` + url, ...arg)
|
||||
|
||||
/**
|
||||
* 产码方案Api接口管理器
|
||||
*
|
||||
* @author luojun
|
||||
* @date 2024/08/31 10:25
|
||||
**/
|
||||
export default {
|
||||
// 获取产码方案分页
|
||||
productCodeSchemePage(data) {
|
||||
return request('page', data, 'get')
|
||||
},
|
||||
// 提交产码方案表单 edit为true时为编辑，默认为新增
|
||||
productCodeSchemeSubmitForm(data, edit = false) {
|
||||
return request(edit ? 'edit' : 'add', data)
|
||||
},
|
||||
// 删除产码方案
|
||||
productCodeSchemeDelete(data) {
|
||||
return request('delete', data)
|
||||
},
|
||||
// 获取产码方案详情
|
||||
productCodeSchemeDetail(data) {
|
||||
return request('detail', data, 'get')
|
||||
},
|
||||
// 产码生成
|
||||
productCodeSchemeProduce(data) {
|
||||
return requestCode('produce', data, 'get', {
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div class="ant-dropdown-menu s-tool-column ant-dropdown-content">
|
||||
<div class="s-tool-column-header s-tool-column-item">
|
||||
<a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> 列展示 </a-checkbox>
|
||||
<a @click="reset">重置</a>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="ant-checkbox-group">
|
||||
<div>
|
||||
<draggable :list="columnsSetting" item-key="dataIndex" animation="300" @end="emitColumnChange">
|
||||
<template #item="{ element }">
|
||||
<div class="s-tool-column-item">
|
||||
<div class="s-tool-column-handle layout-items-center">
|
||||
<more-outlined />
|
||||
<more-outlined />
|
||||
</div>
|
||||
<a-checkbox v-model:checked="element.checked" @change="onChange">{{ element.title }}</a-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import Draggable from 'vuedraggable-es'
|
||||
const emit = defineEmits(['columnChange'])
|
||||
const props = defineProps({
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const indeterminate = ref(false)
|
||||
const checkAll = ref(true)
|
||||
const columnsSetting = ref([])
|
||||
const originColumns = ref()
|
||||
|
||||
onMounted(() => {
|
||||
columnsSetting.value = props.columns.map((value) => {
|
||||
if (value.checked === undefined) {
|
||||
return {
|
||||
...value,
|
||||
checked: true
|
||||
}
|
||||
} else return value
|
||||
})
|
||||
|
||||
// 这里要用深的拷贝，否则，勾选了字段时会修改了originColumns里的内容
|
||||
originColumns.value = columnsSetting.value.map((value) => ({ ...value }))
|
||||
|
||||
// 处理全选组件
|
||||
const notCheckedList = columnsSetting.value.filter((value) => !value.checked)
|
||||
if (notCheckedList.length) checkAll.value = false
|
||||
})
|
||||
|
||||
const reset = () => {
|
||||
columnsSetting.value = originColumns.value.map((value) => ({ ...value }))
|
||||
indeterminate.value = false
|
||||
const checkedList = columnsSetting.value.filter((value) => value.checked)
|
||||
checkAll.value = checkedList.length === columnsSetting.value.length
|
||||
emitColumnChange()
|
||||
}
|
||||
|
||||
const onChange = () => {
|
||||
const checkedList = columnsSetting.value.filter((value) => value.checked)
|
||||
indeterminate.value = Boolean(checkedList.length) && checkedList.length < columnsSetting.value.length
|
||||
checkAll.value = checkedList.length === columnsSetting.value.length
|
||||
emitColumnChange()
|
||||
}
|
||||
|
||||
// 全选
|
||||
const onCheckAllChange = (e) => {
|
||||
e.preventDefault()
|
||||
const val = e.target.checked
|
||||
|
||||
indeterminate.value = false
|
||||
checkAll.value = val
|
||||
columnsSetting.value = props.columns.map((value) => ({
|
||||
...value,
|
||||
checked: val
|
||||
}))
|
||||
emitColumnChange()
|
||||
}
|
||||
|
||||
const emitColumnChange = () => {
|
||||
// eslint-disable-next-line vue/require-explicit-emits
|
||||
emit('columnChange', columnsSetting.value)
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.s-tool-column-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 16px 4px 4px;
|
||||
.ant-checkbox-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
.s-tool-column-handle {
|
||||
opacity: 0.8;
|
||||
cursor: move;
|
||||
.anticon-more {
|
||||
font-size: 12px;
|
||||
& + .anticon-more {
|
||||
margin: 0px 4px 0 -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.s-tool-column-header {
|
||||
padding: 5px 16px 10px 24px;
|
||||
min-width: 180px;
|
||||
}
|
||||
.s-tool-column {
|
||||
.ant-divider {
|
||||
margin: 0;
|
||||
}
|
||||
.ant-checkbox-group {
|
||||
padding: 4px 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,145 +1,731 @@
|
|||
<template>
|
||||
<div class="table-wrapper">
|
||||
<!-- 工具栏 -->
|
||||
<div class="table-tool">
|
||||
<a-button @click="addRow" type="primary">新增</a-button>
|
||||
<a-button @click="addRow" type="primary">删除</a-button>
|
||||
<div className="table-wrapper">
|
||||
<div className="s-table-tool">
|
||||
<div className="s-table-tool-left">
|
||||
<!-- 插槽操作按钮 -->
|
||||
<slot name="operator"></slot>
|
||||
</div>
|
||||
<!-- 斑马纹 -->
|
||||
<div className="layout-items-center s-table-tool-right">
|
||||
<div className="layout-items-center ml-4" v-show="props.toolConfig.striped">
|
||||
<a-checkbox :checked="data.localSettings.rowClassNameSwitch" @change="changeRowClass"> 斑马纹 </a-checkbox>
|
||||
</div>
|
||||
<span v-for="item in tool" :key="item.name">
|
||||
<!-- 新增 -->
|
||||
<a-tooltip
|
||||
v-if="item.name === 'plus' && props.toolConfig.plus"
|
||||
:title="item.title"
|
||||
class="s-tool-item"
|
||||
@click="
|
||||
() => {
|
||||
emit('plusRowData')
|
||||
}
|
||||
"
|
||||
>
|
||||
<component class="icons" :is="item.icon"></component>
|
||||
</a-tooltip>
|
||||
<!-- 修改 -->
|
||||
<a-tooltip
|
||||
v-if="item.name === 'edit' && props.toolConfig.edit"
|
||||
:title="item.title"
|
||||
class="s-tool-item"
|
||||
@click="
|
||||
() => {
|
||||
emit('editRowData')
|
||||
}
|
||||
"
|
||||
>
|
||||
<component class="icons" :is="item.icon"></component>
|
||||
</a-tooltip>
|
||||
<!-- 删除 -->
|
||||
<a-tooltip v-if="item.name === 'delete' && props.toolConfig.delete" :title="item.title" class="s-tool-item">
|
||||
<a-popconfirm
|
||||
v-if="item.name === 'delete' && props.toolConfig.delete"
|
||||
title="确定要删除吗？"
|
||||
ok-text="确认"
|
||||
cancel-text="取消"
|
||||
@confirm="
|
||||
() => {
|
||||
emit('deleteRowData')
|
||||
}
|
||||
"
|
||||
>
|
||||
<component class="icons" :is="item.icon"></component>
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
<!-- 刷新 -->
|
||||
<a-tooltip
|
||||
v-if="item.name === 'refresh' && props.toolConfig.refresh"
|
||||
:title="item.title"
|
||||
class="s-tool-item"
|
||||
@click="refresh"
|
||||
>
|
||||
<component class="icons" :is="item.icon"></component>
|
||||
</a-tooltip>
|
||||
|
||||
<!-- 列展示 -->
|
||||
<a-popover
|
||||
v-if="item.isPopover && item.name === 'columnSetting' && props.toolConfig.columnSetting"
|
||||
trigger="click"
|
||||
placement="topLeft"
|
||||
overlayClassName="s-table-column-settings"
|
||||
arrow-point-at-center
|
||||
>
|
||||
<template #content>
|
||||
<columnSetting :columns="props.columns" @columnChange="columnChange" />
|
||||
</template>
|
||||
<a-tooltip :title="item.title" class="s-tool-item">
|
||||
<component class="icons" :is="item.icon"></component>
|
||||
</a-tooltip>
|
||||
</a-popover>
|
||||
<!-- 密度 -->
|
||||
<a-dropdown trigger="click" v-if="item.isDropdown && item.name === 'height' && props.toolConfig.height">
|
||||
<template #overlay>
|
||||
<a-menu selectable :selectedKeys="[data.customSize]" @click="changeHeight">
|
||||
<a-menu-item key="default">默认</a-menu-item>
|
||||
<a-menu-item key="middle">中等</a-menu-item>
|
||||
<a-menu-item key="small">紧凑</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-tooltip :title="item.title" class="s-tool-item">
|
||||
<component class="icons" :is="item.icon"></component>
|
||||
</a-tooltip>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计列数据 -->
|
||||
<a-alert showIcon class="mb-4" v-if="props.alert">
|
||||
<template #message>
|
||||
<div>
|
||||
<span className="mr-3">
|
||||
已选择:{{ ' ' }}
|
||||
<a className="font-6">
|
||||
{{
|
||||
props.rowSelection && props.rowSelection.selectedRowKeys ? props.rowSelection.selectedRowKeys.length : 0
|
||||
}}
|
||||
</a>
|
||||
</span>
|
||||
<span className="mr-3" v-for="item in data.needTotalList">
|
||||
{{ item.title }} 总计{{ ' ' }}
|
||||
<a className="font-6">{{ !item.customRender ? item.total : item.customRender(item.total) }}</a>
|
||||
</span>
|
||||
<a
|
||||
v-show="
|
||||
props.rowSelection && props.rowSelection.selectedRowKeys && props.rowSelection.selectedRowKeys.length > 0
|
||||
"
|
||||
className="ml-6"
|
||||
@click="
|
||||
rowClear(
|
||||
typeof props.alert === 'boolean' && props.alert
|
||||
? clearSelected()
|
||||
: props.alert.clear && typeof props.alert.clear === 'function'
|
||||
? props.alert.clear()
|
||||
: null
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ ' ' }}
|
||||
清空{{ ' ' }}
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</a-alert>
|
||||
|
||||
<!-- 表格 -->
|
||||
<a-table
|
||||
size="middle"
|
||||
:dataSource="dataSource"
|
||||
:columns="computedColumns"
|
||||
:rowKey="rowKey"
|
||||
@change="handleTableChange"
|
||||
:scroll="{ x: 'max-content' }"
|
||||
:row-selection="rowSelection"
|
||||
v-bind="{ ...renderTableProps }"
|
||||
:loading="data.localLoading"
|
||||
:data-source="dataSource"
|
||||
@expand="
|
||||
(expanded, record) => {
|
||||
emit('expand', expanded, record)
|
||||
}
|
||||
"
|
||||
@resizeColumn="handleResizeColumn"
|
||||
:rowClassName="
|
||||
(record, index) => (data.localSettings.rowClassNameSwitch ? ((index + 1) % 2 == 0 ? 'odd' : '') : null)
|
||||
"
|
||||
:scroll="scroll"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.editable">
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column?.dataIndex === 'index'">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
<template v-if="isEditable(column)">
|
||||
<component
|
||||
style="width: 100%"
|
||||
:is="getComponent(column.dataType)"
|
||||
v-model:value="record[column.dataIndex]"
|
||||
:options="column.options"
|
||||
:is="getEditorComponent(column)"
|
||||
v-bind="column.attrs"
|
||||
v-model:value="record[column.dataIndex]"
|
||||
@change="onCellChange(record, column)"
|
||||
:placeholder="'请输入' + column.title"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ record[column.dataIndex] }}</span>
|
||||
<template v-if="!isEditable(column)">
|
||||
{{ record[column?.dataIndex] }}
|
||||
</template>
|
||||
|
||||
<template v-if="column?.slot">
|
||||
<slot name="action" v-bind="{ record, index }" />
|
||||
</template>
|
||||
<template #actions="{ record }">
|
||||
<a-button @click="edit(record[props.rowKey])" size="small">编辑</a-button>
|
||||
<a-popconfirm title="确定删除吗？" @confirm="() => deleteRow(record[props.rowKey])">
|
||||
<a-button type="danger" size="small">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, defineProps } from 'vue'
|
||||
import { tableProps } from 'ant-design-vue/es/table/Table.js'
|
||||
import columnSetting from './columnSetting.vue'
|
||||
import { useSlots } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { get } from 'lodash-es'
|
||||
const slots = useSlots()
|
||||
const route = useRoute()
|
||||
const emit = defineEmits(['expand', 'plusRowData', 'editRowData', 'deleteRowData', 'refresh'])
|
||||
const renderSlots = Object.keys(slots)
|
||||
|
||||
// 通过 defineProps 获取外部传递的属性
|
||||
const props = defineProps({
|
||||
initialData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
const props = defineProps(
|
||||
Object.assign({}, tableProps(), {
|
||||
rowKey: {
|
||||
type: String,
|
||||
type: [String, Function],
|
||||
default: 'key'
|
||||
},
|
||||
data: {
|
||||
type: [Function, Array],
|
||||
required: false
|
||||
},
|
||||
dataSource: {
|
||||
type: [Array],
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
pageNum: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
showSizeChanger: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
compSize: {
|
||||
type: String,
|
||||
default: 'middle'
|
||||
},
|
||||
alert: {
|
||||
type: [Object, Boolean],
|
||||
default: null
|
||||
},
|
||||
rowSelection: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
lineSelection: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
customRow: {
|
||||
type: Function,
|
||||
default: undefined
|
||||
},
|
||||
showPagination: {
|
||||
type: [String, Boolean],
|
||||
default: 'auto'
|
||||
},
|
||||
defaultPageSize: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
pageSizeOptions: {
|
||||
type: Array,
|
||||
default: () => ['10', '20', '50', '100']
|
||||
},
|
||||
extraTool: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 配置工具栏
|
||||
toolConfig: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
plus: false,
|
||||
edit: false,
|
||||
delete: false,
|
||||
refresh: false,
|
||||
height: false,
|
||||
columnSetting: false,
|
||||
striped: false
|
||||
})
|
||||
},
|
||||
scroll: {
|
||||
type: Object,
|
||||
default: {
|
||||
x: '100%'
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
const data = reactive({
|
||||
needTotalList: [],
|
||||
localDataSource: [],
|
||||
localPagination: Object.assign({}, props.pagination),
|
||||
isFullscreen: false,
|
||||
customSize: props.compSize,
|
||||
columnsSetting: [],
|
||||
localSettings: {
|
||||
rowClassName: props.rowClassName,
|
||||
rowClassNameSwitch: Boolean(props.rowClassName)
|
||||
}
|
||||
})
|
||||
|
||||
// 内部数据
|
||||
const dataSource = ref([...props.initialData])
|
||||
const editingKey = ref(null)
|
||||
watch(
|
||||
() => props.pageNum,
|
||||
(newVal) => {
|
||||
Object.assign(data.localPagination, {
|
||||
current: newVal
|
||||
})
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.size,
|
||||
(newVal) => {
|
||||
Object.assign(data.localPagination, {
|
||||
size: newVal
|
||||
})
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.showSizeChanger,
|
||||
(newVal) => {
|
||||
Object.assign(data.localPagination, {
|
||||
showSizeChanger: newVal
|
||||
})
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.columns,
|
||||
(newVal) => {
|
||||
data.columnsSetting = newVal
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.dataSource,
|
||||
(newVal) => {
|
||||
data.columnsSetting = newVal
|
||||
}
|
||||
)
|
||||
|
||||
// 获取合适的组件
|
||||
const getComponent = (dataType) => {
|
||||
switch (dataType) {
|
||||
case 'number':
|
||||
return 'a-input-number'
|
||||
case 'select':
|
||||
return 'a-select'
|
||||
default:
|
||||
// 收缩列
|
||||
const handleResizeColumn = (w, col) => {
|
||||
col.width = w
|
||||
}
|
||||
|
||||
// 表格props
|
||||
const renderTableProps = ref([])
|
||||
// 右上角工具数组
|
||||
const tool = [
|
||||
{
|
||||
name: 'plus',
|
||||
icon: 'plus-outlined',
|
||||
title: '新增'
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
icon: 'edit-outlined',
|
||||
title: '编辑'
|
||||
},
|
||||
{
|
||||
name: 'delete',
|
||||
icon: 'delete-outlined',
|
||||
title: '删除'
|
||||
},
|
||||
{
|
||||
name: 'refresh',
|
||||
icon: 'sync-outlined',
|
||||
title: '刷新'
|
||||
},
|
||||
{
|
||||
name: 'height',
|
||||
icon: 'column-height-outlined',
|
||||
title: '密度',
|
||||
isDropdown: true
|
||||
},
|
||||
{
|
||||
name: 'columnSetting',
|
||||
icon: 'setting-outlined',
|
||||
title: '列设置',
|
||||
isPopover: true,
|
||||
visible: false
|
||||
}
|
||||
]
|
||||
|
||||
// 刷新
|
||||
const refresh = (bool = false) => {
|
||||
console.log(123131)
|
||||
bool &&
|
||||
(data.localPagination = Object.assign(
|
||||
{},
|
||||
{
|
||||
current: 1,
|
||||
pageSize: data.localPagination.pageSize
|
||||
}
|
||||
))
|
||||
loadData()
|
||||
getTableProps()
|
||||
emit('refresh')
|
||||
}
|
||||
// 斑马纹勾选
|
||||
const changeRowClass = (v) => {
|
||||
data.localSettings.rowClassNameSwitch = v.target.checked
|
||||
getTableProps()
|
||||
}
|
||||
// 密度切换
|
||||
const changeHeight = (v) => {
|
||||
data.customSize = v.key
|
||||
getTableProps()
|
||||
}
|
||||
// 列设置
|
||||
const columnChange = (v) => {
|
||||
data.columnsSetting = v
|
||||
getTableProps()
|
||||
}
|
||||
// 列清空
|
||||
const rowClear = (callback) => {
|
||||
clearSelected()
|
||||
}
|
||||
// 初始化
|
||||
const init = () => {
|
||||
const { current } = route.params
|
||||
const localPageNum = (current && parseInt(current)) || props.pageNum
|
||||
data.localPagination =
|
||||
(['auto', true].includes(props.showPagination) &&
|
||||
Object.assign({}, data.localPagination, {
|
||||
current: localPageNum,
|
||||
pageSize: props.size, //props.compSize, size// 改动
|
||||
showSizeChanger: props.showSizeChanger,
|
||||
defaultPageSize: props.defaultPageSize,
|
||||
pageSizeOptions: props.pageSizeOptions,
|
||||
showTotal: (total, range) => {
|
||||
return `${range[0]}-${range[1]} 共 ${total} 条 `
|
||||
}
|
||||
})) ||
|
||||
false
|
||||
data.needTotalList = initTotalList(props.columns)
|
||||
data.columnsSetting = props.columns
|
||||
loadData()
|
||||
}
|
||||
|
||||
const initTotalList = (columns) => {
|
||||
const totalList = []
|
||||
columns &&
|
||||
columns instanceof Array &&
|
||||
columns.forEach((column) => {
|
||||
if (column.needTotal) {
|
||||
totalList.push({
|
||||
...column,
|
||||
total: 0
|
||||
})
|
||||
}
|
||||
})
|
||||
return totalList
|
||||
}
|
||||
|
||||
// 加载数据方法 分页选项器 过滤条件 排序条件
|
||||
const loadData = (pagination, filters, sorter) => {
|
||||
// 设置loading
|
||||
data.localLoading = true
|
||||
// 获取请求数据
|
||||
const parameter = Object.assign(
|
||||
{
|
||||
current:
|
||||
(pagination && pagination.current) || (props.showPagination && data.localPagination.current) || props.pageNum,
|
||||
// 此处后端使用size作为分页参数
|
||||
size:
|
||||
(pagination && pagination.pageSize) ||
|
||||
(props.showPagination && data.localPagination.pageSize) ||
|
||||
props.pageSize ||
|
||||
data.localPagination.pageSize
|
||||
},
|
||||
(sorter &&
|
||||
sorter.field && {
|
||||
sortField: sorter.field
|
||||
}) ||
|
||||
{},
|
||||
(sorter &&
|
||||
sorter.order && {
|
||||
sortOrder: sorter.order
|
||||
}) ||
|
||||
{},
|
||||
{
|
||||
...filters
|
||||
}
|
||||
)
|
||||
// 用请求数据请求该列表的返回数据
|
||||
if (typeof props.data !== 'function') {
|
||||
data.localLoading = false
|
||||
data.localDataSource = props.data
|
||||
|
||||
getTableProps()
|
||||
} else {
|
||||
const result = props.data(parameter)
|
||||
if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
|
||||
result
|
||||
.then((r) => {
|
||||
if (r == null) {
|
||||
data.localLoading = false
|
||||
return
|
||||
}
|
||||
// 获取分页数据及分页的显示内容
|
||||
data.localPagination =
|
||||
(props.showPagination &&
|
||||
Object.assign({}, data.localPagination, {
|
||||
current: r.current, // pageNo, // 返回结果中的当前分页数
|
||||
total: r.total, // totalRows, // 返回结果中的总记录数
|
||||
showSizeChanger: props.showSizeChanger,
|
||||
pageSizeOptions: props.pageSizeOptions,
|
||||
showTotal: (total, range) => {
|
||||
return `${range[0]}-${range[1]} 共 ${total} 条 `
|
||||
},
|
||||
pageSize: (pagination && pagination.pageSize) || data.localPagination.pageSize
|
||||
})) ||
|
||||
false
|
||||
// 后端数据records为null保存修复
|
||||
if (r.records == null) {
|
||||
r.records = []
|
||||
}
|
||||
// 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
|
||||
if (r.records.length === 0 && props.showPagination && data.localPagination.current > 1) {
|
||||
data.localPagination.current--
|
||||
loadData()
|
||||
return
|
||||
}
|
||||
try {
|
||||
// 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能
|
||||
// 没有数据或只有一页数据时隐藏分页栏
|
||||
// if ((['auto', true].includes(props.showPagination) && r.total <= (r.pages * data.localPagination.pageSize))) {
|
||||
// data.localPagination.hideOnSinglePage = true
|
||||
// }
|
||||
if (!props.showPagination) {
|
||||
data.localPagination.hideOnSinglePage = true
|
||||
}
|
||||
} catch (e) {
|
||||
data.localPagination = false
|
||||
}
|
||||
|
||||
// 返回结果中的数组数据
|
||||
if (props.showPagination === false) {
|
||||
data.localDataSource = r instanceof Array ? r : r.records
|
||||
} else {
|
||||
data.localDataSource = r.records
|
||||
}
|
||||
getTableProps()
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
data.localLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载table的props
|
||||
const getTableProps = () => {
|
||||
let renderProps = {}
|
||||
const localKeys = Object.keys(data)
|
||||
// 这里拿到antd表格的可用API进行过滤
|
||||
Object.keys(Object.assign(tableProps(), props)).forEach((k) => {
|
||||
// 将本地的localdata等默认字段转换为API所提供字段
|
||||
const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
|
||||
// 这里去判断是否获取相同的值并且给 table 的 props 赋值
|
||||
if (localKeys.includes(localKey)) {
|
||||
renderProps[k] = data[localKey]
|
||||
return
|
||||
}
|
||||
|
||||
// 如果开启了alert，需要将 rowSelection 的事件重新绑定，在切换页面的时候选择栏不会被清空
|
||||
// 如果没打算开启 rowSelection 则清空默认的选择项
|
||||
if (k === 'rowSelection') {
|
||||
renderProps[k] = props.rowSelection
|
||||
? {
|
||||
...props.rowSelection,
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
updateSelect(selectedRowKeys, selectedRows)
|
||||
typeof props[k].onChange !== 'undefined' && props[k].onChange(selectedRowKeys, selectedRows)
|
||||
}
|
||||
}
|
||||
: null
|
||||
return
|
||||
}
|
||||
|
||||
// 设置行属性, 点击行时高亮
|
||||
if (k === 'customRow') {
|
||||
if (props.lineSelection && props.rowSelection) {
|
||||
// 如果需要 整行选择，则重新绑定 customRow 事件
|
||||
renderProps[k] = (record, index) => {
|
||||
return {
|
||||
...(typeof props.customRow !== 'undefined' && props.customRow(record, index)),
|
||||
onClick: (event) => {
|
||||
// 若存在原onClick则执行
|
||||
typeof data[k] !== 'undefined' &&
|
||||
typeof data[k](record, index).onClick !== 'undefined' &&
|
||||
data[k](record, index).onClick(event)
|
||||
// 记录为disabled则直接返回，默认为不可选
|
||||
const rowDisabled =
|
||||
typeof props.rowSelection.getCheckboxProps !== 'undefined' &&
|
||||
props.rowSelection.getCheckboxProps(record).disabled
|
||||
if (rowDisabled) return
|
||||
// 过滤自定义按钮的非空白区域
|
||||
const classList = event.target?.classList
|
||||
if (!classList.contains('ant-table-cell')) return
|
||||
const key = (typeof props.rowKey === 'function' && props.rowKey(record)) || props.rowKey || index
|
||||
let selectedRows = props.rowSelection.selectedRows
|
||||
let selectedRowKeys = props.rowSelection.selectedRowKeys
|
||||
const rowType = props.rowSelection?.type || 'checkbox'
|
||||
|
||||
if (rowType === 'radio' || props.rowSelection.selectedRowKeys === undefined) {
|
||||
selectedRowKeys = [key]
|
||||
selectedRows = [record]
|
||||
} else if (!props.rowSelection.selectedRowKeys?.includes(key)) {
|
||||
selectedRowKeys.push(key)
|
||||
selectedRows.push(record)
|
||||
} else {
|
||||
const index = props.rowSelection.selectedRowKeys?.findIndex((itemKey) => itemKey === key)
|
||||
selectedRows.splice(index, 1)
|
||||
selectedRowKeys.splice(index, 1)
|
||||
}
|
||||
updateSelect(selectedRowKeys, selectedRows)
|
||||
}
|
||||
}
|
||||
}
|
||||
return renderProps[k]
|
||||
}
|
||||
}
|
||||
renderProps[k] = props[k]
|
||||
})
|
||||
renderProps = {
|
||||
...renderProps,
|
||||
size: data.customSize, // 注意这个size是a-table组件需要的，这里不能跟别的地方成为compSize
|
||||
columns: data.columnsSetting.filter((value) => value.checked === undefined || value.checked),
|
||||
...data.localSettings
|
||||
}
|
||||
// 将值为 undefined 或者 null 的 table里props属性进行一个过滤
|
||||
renderTableProps.value = Object.entries(renderProps).reduce((x, [y, z]) => (z == null ? x : ((x[y] = z), x)), {})
|
||||
console.log(renderTableProps.value, 'renderTableProps.value')
|
||||
}
|
||||
|
||||
// 用于更新已选中的列表数据 total 统计
|
||||
const updateSelect = (selectedRowKeys, selectedRows) => {
|
||||
if (props.rowSelection) {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.rowSelection.selectedRows = selectedRows
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.rowSelection.selectedRowKeys = selectedRowKeys
|
||||
// props.rowSelection.onChange(selectedRowKeys, selectedRows)
|
||||
getTableProps()
|
||||
}
|
||||
const list = data.needTotalList
|
||||
data.needTotalList = list.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce((sum, val) => {
|
||||
return addNumbers(sum, get(val, item.dataIndex))
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 如果开启了needTotal计算总和，支持小数点
|
||||
const addNumbers = (num1, num2) => {
|
||||
// 将参数转换为数字
|
||||
let num1Value = Number(num1)
|
||||
let num2Value = Number(num2)
|
||||
// 检查转换后的值是否为有效的数字，如果不是，搞成0，别影响其他数据的正确性
|
||||
if (isNaN(num1Value)) {
|
||||
num1Value = 0
|
||||
}
|
||||
if (isNaN(num2Value)) {
|
||||
num2Value = 0
|
||||
}
|
||||
// 计算小数点后的总位数
|
||||
const num1DecimalPlaces = ('' + num1Value).split('.')[1] ? ('' + num1Value).split('.')[1].length : 0
|
||||
const num2DecimalPlaces = ('' + num2Value).split('.')[1] ? ('' + num2Value).split('.')[1].length : 0
|
||||
const decimalPlaces = Math.max(num1DecimalPlaces, num2DecimalPlaces)
|
||||
// 将数字乘以10的幂，使其变为整数，进行相加，然后除以相同的10的幂，还原为原始的小数形式
|
||||
return (
|
||||
(Math.round(num1Value * Math.pow(10, decimalPlaces)) + Math.round(num2Value * Math.pow(10, decimalPlaces))) /
|
||||
Math.pow(10, decimalPlaces)
|
||||
)
|
||||
}
|
||||
// 清空 table 已选中项
|
||||
const clearSelected = () => {
|
||||
if (props.rowSelection) {
|
||||
props.rowSelection.onChange([], [])
|
||||
updateSelect([], [])
|
||||
getTableProps()
|
||||
}
|
||||
}
|
||||
// 刷新并清空已选
|
||||
const clearRefreshSelected = (bool = false) => {
|
||||
refresh(bool)
|
||||
clearSelected()
|
||||
}
|
||||
// 暴露子组件的方法
|
||||
defineExpose({
|
||||
clearRefreshSelected,
|
||||
refresh,
|
||||
clearSelected
|
||||
})
|
||||
|
||||
const isEditable = (column) => {
|
||||
return column?.editable
|
||||
}
|
||||
|
||||
const getEditorComponent = (column) => {
|
||||
if (column.editorType) {
|
||||
return column.editorType
|
||||
}
|
||||
return 'a-input'
|
||||
}
|
||||
|
||||
const onCellChange = (record, column) => {
|
||||
// 如果需要在单元格更改时执行特定操作，可以在这里处理
|
||||
}
|
||||
|
||||
// 计算列配置
|
||||
const computedColumns = computed(() => {
|
||||
return props.columns.map((col) => ({
|
||||
...col,
|
||||
editable: col.editable
|
||||
}))
|
||||
})
|
||||
const saveChanges = () => {
|
||||
// emit('save', Object.values(data.editableData))
|
||||
}
|
||||
|
||||
const addRow = () => {
|
||||
const newRow = {
|
||||
[props.rowKey]: Date.now().toString(),
|
||||
...props.columns.reduce((acc, col) => {
|
||||
if (col.dataIndex) acc[col.dataIndex] = ''
|
||||
const cancelChanges = () => {
|
||||
initEditableData()
|
||||
}
|
||||
|
||||
const initEditableData = () => {
|
||||
data.editableData = data.localDataSource.reduce((acc, record) => {
|
||||
acc[record.key] = { ...record }
|
||||
return acc
|
||||
}, {})
|
||||
}
|
||||
dataSource.value = [...dataSource.value, newRow]
|
||||
edit(newRow[props.rowKey])
|
||||
}
|
||||
|
||||
const deleteRow = (key) => {
|
||||
dataSource.value = dataSource.value.filter((item) => item[props.rowKey] !== key)
|
||||
}
|
||||
|
||||
const handleFieldChange = (key, field, value) => {
|
||||
dataSource.value = dataSource.value.map((item) => (item[props.rowKey] === key ? { ...item, [field]: value } : item))
|
||||
}
|
||||
|
||||
const isEditing = (record) => record[props.rowKey] === editingKey.value
|
||||
|
||||
const edit = (key) => {
|
||||
editingKey.value = key
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
editingKey.value = null
|
||||
}
|
||||
|
||||
const cancel = () => {
|
||||
editingKey.value = null
|
||||
}
|
||||
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
console.log('Table changed:', pagination, filters, sorter)
|
||||
}
|
||||
|
||||
const rowSelection = {
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
|
||||
},
|
||||
onSelect: (record, selected, selectedRows) => {
|
||||
console.log(record, selected, selectedRows)
|
||||
},
|
||||
onSelectAll: (selected, selectedRows, changeRows) => {
|
||||
console.log(selected, selectedRows, changeRows)
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
// initEditableData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-wrapper {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.table-tool {
|
||||
<style lang="less" scoped>
|
||||
.s-table-tool {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
.s-table-tool-left {
|
||||
flex: 1;
|
||||
}
|
||||
.s-table-tool-right {
|
||||
.s-tool-item {
|
||||
font-size: 16px;
|
||||
@apply ml-4;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -147,6 +147,7 @@
|
|||
:rowClassName="
|
||||
(record, index) => (data.localSettings.rowClassNameSwitch ? ((index + 1) % 2 == 0 ? 'odd' : '') : null)
|
||||
"
|
||||
:scroll="{ x: '100%' }"
|
||||
>
|
||||
<template #[item]="scope" v-for="item in renderSlots">
|
||||
<slot
|
||||
|
|
@ -669,4 +670,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -43,12 +43,12 @@ export function useTableManagement(apiModule = {}, tableColumns, hasPermData, is
|
|||
// 判断columns 是否有操作
|
||||
const columnsFilter = columns.value.filter((item) => item.dataIndex === 'action')
|
||||
if (columnsFilter.length === 0 && isShowAction)
|
||||
columns.value.unshift({
|
||||
columns.value.push({
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
fixed: 'left'
|
||||
width: 160,
|
||||
fixed: 'right'
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { createApp } from 'vue'
|
||||
import Antd from 'ant-design-vue'
|
||||
import { createPinia } from 'pinia'
|
||||
// import STable from '@shene/table'
|
||||
// import '@shene/table/dist/index.css'
|
||||
|
||||
import './style/index.less'
|
||||
import snowy from './snowy'
|
||||
|
|
@ -15,6 +17,7 @@ app.use(router)
|
|||
app.use(Antd)
|
||||
app.use(i18n)
|
||||
app.use(snowy)
|
||||
// app.use(STable)
|
||||
|
||||
// 挂载app
|
||||
app.mount('#app')
|
||||
|
|
|
|||
|
|
@ -363,7 +363,7 @@ body,
|
|||
.gen-preview-content,
|
||||
.ant-menu,
|
||||
.ant-tabs-dropdown-menu,
|
||||
.xn-table,
|
||||
.xs-table,
|
||||
.selector-table,
|
||||
.card-div,
|
||||
.ant-table-body,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,136 @@
|
|||
<template>
|
||||
<div class="wrap flex">
|
||||
<div class="sider">
|
||||
<iphone></iphone>
|
||||
</div>
|
||||
<div class="content">
|
||||
<a-tabs v-model:activeKey="activeKey" type="card">
|
||||
<a-tab-pane key="1" tab="基本配置">Content of Tab Pane 1</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="轮播图" force-render>
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
list-type="picture-card"
|
||||
@preview="handlePreview"
|
||||
>
|
||||
<div v-if="fileList.length < 8">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">Upload</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="产品验证正防伪信息">Content of Tab Pane 3</a-tab-pane>
|
||||
<a-tab-pane key="4" tab="溯源流程">Content of Tab Pane 3</a-tab-pane>
|
||||
<a-tab-pane key="5" tab="产品介绍">
|
||||
<XnEditor></XnEditor>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="6" tab="超链接">Content of Tab Pane 3</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// const props = defineProps({})
|
||||
|
||||
// const emit = defineEmits()
|
||||
|
||||
// 生命周期钩子
|
||||
import Iphone from '@/views/productionBusiness/basicData/brand/counterfeiting/iphone.vue'
|
||||
|
||||
const siderStyle = {
|
||||
color: '#fff',
|
||||
backgroundColor: '#fff',
|
||||
width: '350'
|
||||
}
|
||||
|
||||
let activeKey = ref('5')
|
||||
|
||||
onMounted(() => {
|
||||
console.log('Component mounted')
|
||||
// TODO: Add your onMounted code here
|
||||
})
|
||||
|
||||
onUpdated(() => {
|
||||
console.log('Component updated')
|
||||
// TODO: Add your onUpdated code here
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
console.log('Component unmounted')
|
||||
// TODO: Add your onUnmounted code here
|
||||
})
|
||||
|
||||
// watch(() => {}, () => {})
|
||||
function getBase64(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(file)
|
||||
reader.onload = () => resolve(reader.result)
|
||||
reader.onerror = (error) => reject(error)
|
||||
})
|
||||
}
|
||||
const previewVisible = ref(false)
|
||||
const previewImage = ref('')
|
||||
const previewTitle = ref('')
|
||||
const fileList = ref([
|
||||
{
|
||||
uid: '-1',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
|
||||
},
|
||||
{
|
||||
uid: '-2',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
|
||||
},
|
||||
{
|
||||
uid: '-3',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
|
||||
},
|
||||
{
|
||||
uid: '-4',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
|
||||
},
|
||||
])
|
||||
const handleCancel = () => {
|
||||
previewVisible.value = false
|
||||
previewTitle.value = ''
|
||||
}
|
||||
const handlePreview = async (file) => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj)
|
||||
}
|
||||
previewImage.value = file.url || file.preview
|
||||
previewVisible.value = true
|
||||
previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.wrap {
|
||||
background: #ffffff;
|
||||
padding: 30px;
|
||||
|
||||
.sider {
|
||||
width: 460px;
|
||||
position: relative;
|
||||
height: 680px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="iphone"></div>
|
||||
<div class="iphone-content">
|
||||
<div class="iphone-content-bg">
|
||||
<img src="@/assets/images/h5_bg.jpg" alt="北京图" class="h5_bg" />
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="container-logo">
|
||||
<img src="@/assets/images/h5_logo.jpg" alt="logo" />
|
||||
</div>
|
||||
<div class="container-box">
|
||||
<h3 class="container-box-title">产品信息</h3>
|
||||
<p class="container-box-desc">产品名称：莫个葡萄红酒</p>
|
||||
<p class="container-box-desc">产品名称：莫个葡萄红酒</p>
|
||||
<p class="container-box-desc">产品名称：莫个葡萄红酒</p>
|
||||
</div>
|
||||
<div class="container-box">
|
||||
<h3 class="container-box-title">防伪查询结果</h3>
|
||||
<h3>您所查询的122064588954755为官方正品</h3>
|
||||
</div>
|
||||
<div class="container-box">
|
||||
<h3 class="container-box-title">溯源记录</h3>
|
||||
<p class="container-box-desc">产品名称：莫个葡萄红酒</p>
|
||||
<p class="container-box-desc">产品名称：莫个葡萄红酒</p>
|
||||
<p class="container-box-desc">产品名称：莫个葡萄红酒</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// const props = defineProps({})
|
||||
|
||||
// const emit = defineEmits()
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
console.log('Component mounted')
|
||||
// TODO: Add your onMounted code here
|
||||
})
|
||||
|
||||
onUpdated(() => {
|
||||
console.log('Component updated')
|
||||
// TODO: Add your onUpdated code here
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
console.log('Component unmounted')
|
||||
// TODO: Add your onUnmounted code here
|
||||
})
|
||||
|
||||
// watch(() => {}, () => {})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.iphone {
|
||||
font-size: 16px;
|
||||
background-color: #fff;
|
||||
width: 330px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
background-image: url('@/assets/images/iPhone13.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
border-radius: 30px;
|
||||
padding: 48px 13px 25px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.iphone-content {
|
||||
width: 330px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
border-bottom-left-radius: 30px;
|
||||
overflow: hidden;
|
||||
padding: 48px 13px 25px;
|
||||
|
||||
&-bg {
|
||||
position: absolute;
|
||||
padding: 48px 13px 25px;
|
||||
width: 330px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
|
||||
.h5_bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0 0 30px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 101;
|
||||
top: 0;
|
||||
&-logo {
|
||||
text-align: center;
|
||||
img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
&-box {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px;
|
||||
margin: 0 15px 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.slick-slide) {
|
||||
text-align: center;
|
||||
height: 160px;
|
||||
line-height: 160px;
|
||||
background: #364d79;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.slick-slide h3) {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,6 +5,17 @@
|
|||
</template>
|
||||
</a-page-header>
|
||||
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="
|
||||
navigateTo('/brand/counterfeiting', {
|
||||
type: 'ADD'
|
||||
})
|
||||
"
|
||||
>
|
||||
防伪页面
|
||||
</a-button>
|
||||
|
||||
<a-card :bordered="false" title="品牌">
|
||||
<DynamicForm
|
||||
:allDisabled="route.query.type === 'SEARCH'"
|
||||
|
|
@ -41,6 +52,8 @@
|
|||
import useFormHandler from '@/hook/useFormHandler'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { brandFormItems, formRules } from '@/views/productionBusiness/basicData/brand/formFields/detailFields'
|
||||
import { useNavigation } from '@/hook/useNavigation'
|
||||
const { navigateTo } = useNavigation()
|
||||
|
||||
const route = useRoute()
|
||||
const formRef1 = ref(null)
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@
|
|||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a-tooltip title="查看">
|
||||
<a
|
||||
@click="
|
||||
navigateTo('/basicData/brand/detail', {
|
||||
|
|
@ -62,33 +61,49 @@
|
|||
v-if="hasPerm('customerEdit')"
|
||||
>
|
||||
<EyeOutlined />
|
||||
<!-- 查看-->
|
||||
查看
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
|
||||
<a-tooltip title="编辑">
|
||||
<a
|
||||
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
更多
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="
|
||||
navigateTo('/basicData/brand/detail', {
|
||||
type: 'EDIT',
|
||||
id: record.id
|
||||
})
|
||||
"
|
||||
v-if="hasPerm('customerEdit')"
|
||||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<FormOutlined />
|
||||
<!-- 编辑-->
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
|
||||
<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
|
||||
<DeleteOutlined />
|
||||
<!-- 删除-->
|
||||
编辑
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
v-if="hasPerm('materialDelete')"
|
||||
@click="deleteRecord(record)"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,6 @@
|
|||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a-tooltip title="查看">
|
||||
<a
|
||||
@click="
|
||||
navigateTo('/basicData/client/detail', {
|
||||
|
|
@ -88,32 +87,48 @@
|
|||
v-if="hasPerm('customerEdit')"
|
||||
>
|
||||
<EyeOutlined />
|
||||
<!-- 查看-->
|
||||
查看
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
|
||||
<a-tooltip title="编辑">
|
||||
<a
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
更多
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="
|
||||
navigateTo('/basicData/client/detail', {
|
||||
type: 'EDIT',
|
||||
id: record.id
|
||||
})
|
||||
"
|
||||
v-if="hasPerm('customerEdit')"
|
||||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<FormOutlined />
|
||||
<!-- 编辑-->
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
|
||||
<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
|
||||
<DeleteOutlined />
|
||||
编辑
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
v-if="hasPerm('materialDelete')"
|
||||
@click="deleteRecord(record)"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,6 @@
|
|||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a-tooltip title="查看">
|
||||
<a
|
||||
@click="
|
||||
navigateTo('/basicData/materiel/detail', {
|
||||
|
|
@ -88,32 +87,48 @@
|
|||
v-if="hasPerm('materialEdit')"
|
||||
>
|
||||
<EyeOutlined />
|
||||
<!-- 查看-->
|
||||
查看
|
||||
</a>
|
||||
</a-tooltip>
|
||||
<a-divider type="vertical" v-if="hasPerm(['materialEdit', 'materialDelete'], 'and')" />
|
||||
<a-tooltip title="编辑">
|
||||
<a
|
||||
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
更多
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="
|
||||
navigateTo('/basicData/materiel/detail', {
|
||||
type: 'EDIT',
|
||||
id: record.id
|
||||
})
|
||||
"
|
||||
v-if="hasPerm('materialEdit')"
|
||||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<FormOutlined />
|
||||
<!-- 编辑-->
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" v-if="hasPerm(['materialEdit', 'materialDelete'], 'and')" />
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
|
||||
<a-button type="link" danger size="small" v-if="hasPerm('materialDelete')">
|
||||
<DeleteOutlined />
|
||||
<!-- 删除-->
|
||||
编辑
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
v-if="hasPerm('materialDelete')"
|
||||
@click="deleteRecord(record)"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -42,8 +42,8 @@
|
|||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'number'">
|
||||
<span style="color: #0d84ff">{{ record.number }}</span>
|
||||
<template v-if="column.dataIndex === 'type'">
|
||||
<span style="color: #0d84ff">{{ $TOOL.dictTypeData('OFFICIAL_ACCOUNT_TYPE', record.type) }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'enabledState'">
|
||||
<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
|
||||
|
|
@ -51,7 +51,6 @@
|
|||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a-tooltip title="查看">
|
||||
<a
|
||||
@click="
|
||||
navigateTo('/basicData/publicAccount/detail', {
|
||||
|
|
@ -62,33 +61,47 @@
|
|||
v-if="hasPerm('customerEdit')"
|
||||
>
|
||||
<EyeOutlined />
|
||||
<!-- 查看-->
|
||||
查看
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
|
||||
<a-tooltip title="编辑">
|
||||
<a
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
更多
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="
|
||||
navigateTo('/basicData/publicAccount/detail', {
|
||||
type: 'EDIT',
|
||||
id: record.id
|
||||
})
|
||||
"
|
||||
v-if="hasPerm('customerEdit')"
|
||||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<FormOutlined />
|
||||
<!-- 编辑-->
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
|
||||
<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
|
||||
<DeleteOutlined />
|
||||
<!-- 删除-->
|
||||
编辑
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
v-if="hasPerm('materialDelete')"
|
||||
@click="deleteRecord(record)"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,6 @@
|
|||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a-tooltip title="查看">
|
||||
<a
|
||||
@click="
|
||||
navigateTo('/basicData/stash/detail', {
|
||||
|
|
@ -83,33 +82,47 @@
|
|||
v-if="hasPerm('customerEdit')"
|
||||
>
|
||||
<EyeOutlined />
|
||||
<!-- 查看-->
|
||||
查看
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
|
||||
<a-tooltip title="编辑">
|
||||
<a
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
更多
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="
|
||||
navigateTo('/basicData/stash/detail', {
|
||||
type: 'EDIT',
|
||||
id: record.id
|
||||
})
|
||||
"
|
||||
v-if="hasPerm('customerEdit')"
|
||||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<FormOutlined />
|
||||
<!-- 编辑-->
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
|
||||
<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
|
||||
<DeleteOutlined />
|
||||
<!-- 删除-->
|
||||
编辑
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
v-if="hasPerm('materialDelete')"
|
||||
@click="deleteRecord(record)"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -74,25 +74,45 @@
|
|||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a-tooltip title="查看">
|
||||
<a @click="TissueFormRef.onOpen({ ...record, pageType: 'SEARCH' })">
|
||||
<EyeOutlined />
|
||||
查看
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" />
|
||||
<a-tooltip title="编辑">
|
||||
<a @click="TissueFormRef.onOpen({ ...record, pageType: 'EDIT' })">
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
更多
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="TissueFormRef.onOpen({ ...record, pageType: 'EDIT' })"
|
||||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<FormOutlined />
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="handleConfirmDeleteRecord(record)">
|
||||
<a-button type="link" danger size="small">
|
||||
<DeleteOutlined />
|
||||
编辑
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
v-if="hasPerm('materialDelete')"
|
||||
@click="handleConfirmDeleteRecord(record)"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
export const unitColumns = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
width: 80,
|
||||
resizable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '编码',
|
||||
dataIndex: 'number',
|
||||
|
|
@ -52,6 +59,13 @@ export const unitColumns = [
|
|||
]
|
||||
|
||||
export const unitGroupColumns = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
width: 80,
|
||||
resizable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
|
|
|
|||
|
|
@ -29,7 +29,10 @@
|
|||
<template #operator>
|
||||
<span>单位组</span>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template #bodyCell="{ column, record, index}">
|
||||
<template v-if="column.dataIndex === 'index'">
|
||||
<span>{{ index + 1 }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'enabledState'">
|
||||
<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
|
||||
<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
|
||||
|
|
@ -73,7 +76,10 @@
|
|||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'index'">
|
||||
<span>{{ index + 1 }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'number'">
|
||||
<span style="color: #0d84ff">{{ record.number }}</span>
|
||||
</template>
|
||||
|
|
@ -86,7 +92,6 @@
|
|||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a-tooltip title="查看">
|
||||
<a
|
||||
@click="
|
||||
navigateTo('/basicData/unit/detail', {
|
||||
|
|
@ -97,12 +102,21 @@
|
|||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<EyeOutlined />
|
||||
<!-- 查看-->
|
||||
查看
|
||||
</a>
|
||||
</a-tooltip>
|
||||
<a-divider type="vertical" v-if="hasPerm(['sysUnitEdit', 'sysUnitDelete'], 'and')" />
|
||||
<a-tooltip title="编辑">
|
||||
<a
|
||||
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
更多
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="
|
||||
navigateTo('/basicData/unit/detail', {
|
||||
type: 'EDIT',
|
||||
|
|
@ -112,16 +126,24 @@
|
|||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<FormOutlined />
|
||||
<!-- 编辑-->
|
||||
</a>
|
||||
</a-tooltip>
|
||||
<a-divider type="vertical" v-if="hasPerm(['sysUnitEdit', 'sysUnitDelete'], 'and')" />
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
|
||||
<a-button type="link" danger size="small" v-if="hasPerm('sysUnitDelete')">
|
||||
<DeleteOutlined />
|
||||
<!-- 删除-->
|
||||
编辑
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
@click="deleteRecord(record)"
|
||||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,240 @@
|
|||
<template>
|
||||
<a-card class="mt-4" :bordered="false" title="产码配置">
|
||||
<s-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:alert="options.alert.show"
|
||||
bordered
|
||||
:row-key="(record) => record.id"
|
||||
:tool-config="options.toolConfig"
|
||||
:scroll="{
|
||||
x: '100%'
|
||||
}"
|
||||
>
|
||||
<template #operator>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="codeElementFormRef.onOpen()">
|
||||
<template #icon><plus-outlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'index'">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'barcodeValue'">
|
||||
{{ $TOOL.dictTypeData('MATERIAL_PACKAGE_TYPE', record.barcodeValue) }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a @click="codeElementFormRef.onOpen({ ...record, pageType: 'SEARCH' })">
|
||||
<EyeOutlined />
|
||||
查看
|
||||
</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
更多
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="codeElementFormRef.onOpen({ ...record, pageType: 'EDIT' })"
|
||||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<FormOutlined />
|
||||
编辑
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button type="link" size="small" @click="handleOpenModal(record, { elementType: 1 })"
|
||||
>条码元素</a-button
|
||||
>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button type="link" size="small" @click="handleOpenModal(record, { elementType: 2 })"
|
||||
>内码元素</a-button
|
||||
>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</s-table>
|
||||
</a-card>
|
||||
|
||||
<a-modal v-model:open="open" title="元素配置" width="900px" @ok="handleModalOk" class="modal">
|
||||
<div style="height: 500px">
|
||||
<DynamicTable
|
||||
:scroll="{
|
||||
x: '100%',
|
||||
y: 350
|
||||
}"
|
||||
:dataSource="codeElementData"
|
||||
:columns="codeElementColumn"
|
||||
>
|
||||
<template #operator>
|
||||
<a-button type="primary" @click="handleCodeElement">
|
||||
<template #icon><plus-outlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<template #action="{ record, index }">
|
||||
<a-space>
|
||||
<a type="link" @click="handleUp(index)">
|
||||
<ArrowUpOutlined />
|
||||
上移
|
||||
</a>
|
||||
<a type="link" @click="handleDown(index)"> <ArrowDownOutlined />下移 </a>
|
||||
<a style="color: red" type="link" @click="handleDel(record, index)"><DeleteOutlined /> 删除 </a>
|
||||
</a-space>
|
||||
</template>
|
||||
</DynamicTable>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<code-element-form ref="codeElementFormRef" @successful="successful"></code-element-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { codeElementColumn, codeProduction } from '@/views/productionBusiness/control/codeOrigin/columns/columns'
|
||||
import CodeElementForm from '@/views/productionBusiness/control/codeOrigin/detail/codeElementForm.vue'
|
||||
import { useTableManagement } from '@/hook/useTableManagement'
|
||||
import productCodeConfigApi from '@/api/production/productcode/productCodeConfigApi'
|
||||
import productCodeConfigElementApi from '@/api/production/productcode/productCodeConfigElementApi'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
const codeElementFormRef = ref(null)
|
||||
|
||||
const { searchFormState, tableRef, selectedRowKeys, columns, loadData, deleteBatchRecords, options, deleteRecord } =
|
||||
useTableManagement(
|
||||
{
|
||||
page: productCodeConfigApi.productCodeConfigPage,
|
||||
delete: productCodeConfigApi.productCodeConfigDelete
|
||||
},
|
||||
codeProduction,
|
||||
['materialEdit', 'materialDelete']
|
||||
)
|
||||
|
||||
const successful = () => {
|
||||
tableRef.value.refresh()
|
||||
}
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(async () => {})
|
||||
|
||||
let open = ref(false)
|
||||
let codeElementItem = {}
|
||||
const handleOpenModal = (record, params) => {
|
||||
open.value = true
|
||||
codeElementItem = { ...record, ...params }
|
||||
|
||||
productCodeConfigElementApi
|
||||
.productCodeConfigElementList({ productCodeConfigId: record.id, elementType: params.elementType })
|
||||
.then((res) => {
|
||||
codeElementData.value = res.records || []
|
||||
})
|
||||
}
|
||||
|
||||
let codeElementData = ref([])
|
||||
const handleCodeElement = () => {
|
||||
let newObjItem = {}
|
||||
codeElementColumn.forEach((item) => {
|
||||
newObjItem[item.dataIndex] = null
|
||||
})
|
||||
|
||||
codeElementData.value.push(newObjItem)
|
||||
}
|
||||
|
||||
const handleUp = (index) => {
|
||||
if (index === 0) return // 如果已经是第一行，则不能上移
|
||||
const temp = codeElementData.value[index - 1]
|
||||
codeElementData.value[index - 1] = codeElementData.value[index]
|
||||
codeElementData.value[index] = temp
|
||||
}
|
||||
|
||||
const handleDown = (index) => {
|
||||
if (index === codeElementData.value.length - 1) return // 如果已经是最后一行，则不能下移
|
||||
const temp = codeElementData.value[index + 1]
|
||||
codeElementData.value[index + 1] = codeElementData.value[index]
|
||||
codeElementData.value[index] = temp
|
||||
}
|
||||
|
||||
const handleDel = (record, index) => {
|
||||
if (record.id) {
|
||||
productCodeConfigElementApi
|
||||
.productCodeConfigElementDelete([
|
||||
{
|
||||
id: record.id
|
||||
}
|
||||
])
|
||||
.then((res) => {
|
||||
codeElementData.value.splice(index, 1)
|
||||
})
|
||||
} else {
|
||||
codeElementData.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
const handleModalOk = () => {
|
||||
console.log(codeElementItem)
|
||||
if (codeElementData.value.length === 0) return message.error('请添加元素')
|
||||
if (codeElementData.value.length < 2) return message.error('元素规则必须大于2条')
|
||||
|
||||
for (let i = 0; i < codeElementData.value.length; i++) {
|
||||
if (
|
||||
!codeElementData.value[i].elementLength ||
|
||||
!codeElementData.value[i].elementValue ||
|
||||
!codeElementData.value[i].productCodeRule
|
||||
)
|
||||
return message.error('请完善元素信息')
|
||||
}
|
||||
|
||||
let count = 0
|
||||
|
||||
codeElementData.value.forEach((item) => {
|
||||
count += item.elementLength
|
||||
})
|
||||
|
||||
if (codeElementItem.barcodeLength && codeElementItem.elementType === 1 && count !== codeElementItem.barcodeLength)
|
||||
return message.error('元素所加长度与条码长度不符合')
|
||||
if (
|
||||
codeElementItem.barcodeInteriorLength &&
|
||||
codeElementItem.elementType === 2 &&
|
||||
count !== codeElementItem.barcodeInteriorLength
|
||||
)
|
||||
return message.error('元素所加长度与内码长度不符合')
|
||||
|
||||
productCodeConfigElementApi
|
||||
.productCodeConfigElementBatchSave(
|
||||
codeElementData.value.map((item) => {
|
||||
return {
|
||||
productCodeConfigId: codeElementItem.id,
|
||||
elementType: codeElementItem.elementType,
|
||||
...item
|
||||
}
|
||||
})
|
||||
)
|
||||
.then((res) => {
|
||||
message.success('操作成功')
|
||||
open.value = false
|
||||
})
|
||||
}
|
||||
|
||||
onUpdated(() => {})
|
||||
|
||||
onUnmounted(() => {})
|
||||
|
||||
// watch(() => {}, () => {})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,214 @@
|
|||
import tool from '@/utils/tool'
|
||||
|
||||
export const codeProduction = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
width: 80,
|
||||
resizable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '条码类型',
|
||||
dataIndex: 'barcodeValue',
|
||||
width: 240,
|
||||
resizable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '条码长度',
|
||||
dataIndex: 'barcodeLength',
|
||||
width: 240,
|
||||
editable: true,
|
||||
resizable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '内码长度',
|
||||
dataIndex: 'barcodeInteriorLength',
|
||||
width: 240,
|
||||
editable: true,
|
||||
resizable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
fixed: 'right'
|
||||
}
|
||||
]
|
||||
|
||||
export const packetColumn = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '码包配置名称',
|
||||
dataIndex: 'name',
|
||||
width: 160,
|
||||
editable: true,
|
||||
resizable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '条码类型',
|
||||
dataIndex: 'productCodeConfigLabel',
|
||||
width: 160,
|
||||
editable: true,
|
||||
editorType: 'a-select',
|
||||
attrs: {
|
||||
options: []
|
||||
},
|
||||
resizable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '导出格式',
|
||||
dataIndex: 'exportFormat',
|
||||
width: 160,
|
||||
editable: true,
|
||||
editorType: 'a-select',
|
||||
attrs: {
|
||||
options: []
|
||||
},
|
||||
resizable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '条码前缀',
|
||||
dataIndex: 'barcodePrefix',
|
||||
width: 160,
|
||||
editable: true,
|
||||
resizable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '内码前缀',
|
||||
dataIndex: 'barcodeInteriorPrefix',
|
||||
width: 160,
|
||||
editable: true,
|
||||
resizable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '导出格式示例',
|
||||
dataIndex: 'exportFormatExample',
|
||||
width: 160,
|
||||
editable: true,
|
||||
resizable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
width: 160,
|
||||
fixed: 'right',
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export const codeElementColumn = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
resizable: true,
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '码元素值',
|
||||
dataIndex: 'elementValue',
|
||||
width: 240,
|
||||
editable: true,
|
||||
editorType: 'a-input',
|
||||
resizable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '元素长度',
|
||||
dataIndex: 'elementLength',
|
||||
width: 240,
|
||||
editable: true,
|
||||
editorType: 'a-input-number',
|
||||
align: 'center',
|
||||
resizable: true
|
||||
},
|
||||
{
|
||||
title: '产码规则',
|
||||
dataIndex: 'productCodeRule',
|
||||
width: 240,
|
||||
editable: true,
|
||||
editorType: 'a-select',
|
||||
attrs: {
|
||||
options: tool.dictList('MYSGZ')
|
||||
},
|
||||
align: 'center',
|
||||
resizable: true
|
||||
},
|
||||
/*{
|
||||
title: '备注',
|
||||
dataIndex: 'remarks',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
resizable: true
|
||||
},*/
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slot: 'action',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
fixed: 'right'
|
||||
}
|
||||
]
|
||||
|
||||
export const regionColumn = [
|
||||
{
|
||||
title: '产码生成数量',
|
||||
dataIndex: 'exportNumber',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 300,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '下载次数',
|
||||
dataIndex: 'downloadCount',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 300,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '最后一次下载时间',
|
||||
dataIndex: 'downloadTime',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 300,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'createUserName',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 300,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
sortDirections: ['descend', 'ascend'],
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 300,
|
||||
ellipsis: true
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<xn-form-container
|
||||
:title="formData.id ? '编辑单位组' : '增加单位组'"
|
||||
:width="700"
|
||||
:visible="visible"
|
||||
:destroy-on-close="true"
|
||||
@close="onClose"
|
||||
>
|
||||
<DynamicForm :formItems="codeElementFormFields" :model="formData" :rules="formRules" ref="formRef1" />
|
||||
<OperationalInformation :detailData="recordData" :colSpan="12" v-if="recordData.id"></OperationalInformation>
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
|
||||
<a-button type="primary" @click="onSubmitForm">保存</a-button>
|
||||
</template>
|
||||
</xn-form-container>
|
||||
</template>
|
||||
|
||||
<script setup name="sysUnitGroupForm">
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { codeElementFormFields, formRules } from '@/views/productionBusiness/control/codeOrigin/formFields/drawerForm'
|
||||
import useFormHandler from '@/hook/useFormHandler'
|
||||
import productCodeConfigApi from '@/api/production/productcode/productCodeConfigApi'
|
||||
import tool from '@/utils/tool'
|
||||
|
||||
// 抽屉状态
|
||||
const visible = ref(false)
|
||||
const emit = defineEmits({ successful: null })
|
||||
const formRef1 = ref(null)
|
||||
let recordData = reactive({})
|
||||
// 打开抽屉
|
||||
const onOpen = (record) => {
|
||||
visible.value = true
|
||||
nextTick(() => {
|
||||
formRefs.value = [formRef1.value]
|
||||
|
||||
codeElementFormFields[0].attrs.onChange = (value) => {
|
||||
formData.barcodeLabel = tool.dictTypeData('MATERIAL_PACKAGE_TYPE', value)
|
||||
console.log(formData, 'formData')
|
||||
}
|
||||
})
|
||||
if (record) {
|
||||
recordData = cloneDeep(record)
|
||||
fetchData().then(() => {
|
||||
populateFormData(recordData)
|
||||
})
|
||||
} else {
|
||||
fetchData()
|
||||
recordData = {}
|
||||
}
|
||||
}
|
||||
// 关闭抽屉
|
||||
const onClose = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 验证并提交数据
|
||||
const onSubmitForm = () => {
|
||||
onSubmit({
|
||||
isEnable: true,
|
||||
id: recordData.id
|
||||
}).then(() => {
|
||||
onClose()
|
||||
emit('successful')
|
||||
})
|
||||
}
|
||||
|
||||
let { formData, onSubmit, populateFormData, fetchData, formRefs } = useFormHandler([...codeElementFormFields], {
|
||||
submitForm: productCodeConfigApi.productCodeConfigSubmitForm
|
||||
})
|
||||
|
||||
// 抛出函数
|
||||
defineExpose({
|
||||
onOpen
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<xn-form-container
|
||||
:title="formData.id ? '编辑单位组' : '增加单位组'"
|
||||
:width="700"
|
||||
:visible="visible"
|
||||
:destroy-on-close="true"
|
||||
@close="onClose"
|
||||
>
|
||||
<DynamicForm :formItems="packetConfigFormFields" :model="formData" :rules="formRules" ref="formRef1" />
|
||||
<OperationalInformation :detailData="recordData" :colSpan="12" v-if="recordData.id"></OperationalInformation>
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
|
||||
<a-button type="primary" @click="onSubmitForm">保存</a-button>
|
||||
</template>
|
||||
</xn-form-container>
|
||||
</template>
|
||||
|
||||
<script setup name="sysUnitGroupForm">
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import {
|
||||
packetConfigFormFields,
|
||||
formRules
|
||||
} from '@/views/productionBusiness/control/codeOrigin/formFields/packetConfigForm'
|
||||
import useFormHandler from '@/hook/useFormHandler'
|
||||
import productCodeConfigApi from '@/api/production/productcode/productCodeConfigApi'
|
||||
import productCodePackageConfigApi from '@/api/production/productcode/productCodePackageConfigApi'
|
||||
|
||||
// 抽屉状态
|
||||
const visible = ref(false)
|
||||
const emit = defineEmits({ successful: null })
|
||||
const formRef1 = ref(null)
|
||||
let recordData = reactive({})
|
||||
// 打开抽屉
|
||||
const onOpen = (record) => {
|
||||
visible.value = true
|
||||
nextTick(() => {
|
||||
formRefs.value = [formRef1.value]
|
||||
})
|
||||
|
||||
productCodeConfigApi.productCodeConfigList().then((res) => {
|
||||
packetConfigFormFields[1].attrs.options = res
|
||||
})
|
||||
|
||||
if (record) {
|
||||
recordData = cloneDeep(record)
|
||||
fetchData().then(() => {
|
||||
populateFormData(recordData)
|
||||
})
|
||||
} else {
|
||||
fetchData()
|
||||
recordData = {}
|
||||
}
|
||||
}
|
||||
// 关闭抽屉
|
||||
const onClose = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 验证并提交数据
|
||||
const onSubmitForm = () => {
|
||||
onSubmit({
|
||||
isEnable: true,
|
||||
id: recordData.id
|
||||
}).then(() => {
|
||||
onClose()
|
||||
emit('successful')
|
||||
})
|
||||
}
|
||||
|
||||
let { formData, onSubmit, populateFormData, fetchData, formRefs } = useFormHandler([...packetConfigFormFields], {
|
||||
submitForm: productCodePackageConfigApi.productCodePackageConfigSubmitForm
|
||||
})
|
||||
|
||||
// 抛出函数
|
||||
defineExpose({
|
||||
onOpen
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import tool from '@/utils/tool'
|
||||
import { required } from '@/utils/formRules'
|
||||
|
||||
export const codeElementFormFields = reactive([
|
||||
{
|
||||
label: '条码类型：',
|
||||
name: 'barcodeValue',
|
||||
type: 'a-select',
|
||||
span: 12,
|
||||
attrs: {
|
||||
placeholder: '请选择条码类型',
|
||||
options: tool.dictList('MATERIAL_PACKAGE_TYPE')
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '条码长度：',
|
||||
name: 'barcodeLength',
|
||||
type: 'a-input-number',
|
||||
span: 12,
|
||||
attrs: {
|
||||
placeholder: '请输入条码长度',
|
||||
allowClear: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '内码长度：',
|
||||
name: 'barcodeInteriorLength',
|
||||
type: 'a-input-number',
|
||||
span: 12,
|
||||
attrs: {
|
||||
placeholder: '请输入内码长度',
|
||||
allowClear: true
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
export const formRules = {
|
||||
barcodeValue: [required('请选择条码类型')],
|
||||
barcodeInteriorLength: [required('请输入内码长度')],
|
||||
barcodeLength: [required('请输入条码长度')],
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import tool from '@/utils/tool'
|
||||
import { required } from '@/utils/formRules'
|
||||
|
||||
export const packetConfigFormFields = reactive([
|
||||
{
|
||||
label: '码包配置名称：',
|
||||
name: 'name',
|
||||
type: 'a-input',
|
||||
span: 12,
|
||||
attrs: {
|
||||
placeholder: '请输入码包配置名称'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '条码类型：',
|
||||
name: 'productCodeConfigId',
|
||||
type: 'a-select',
|
||||
span: 12,
|
||||
attrs: {
|
||||
placeholder: '请选择条码类型',
|
||||
options: [],
|
||||
fieldNames: {
|
||||
label: 'barcodeLabel',
|
||||
value: 'id'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '导出格式：',
|
||||
name: 'exportFormat',
|
||||
type: 'a-select',
|
||||
span: 12,
|
||||
attrs: {
|
||||
placeholder: '请选择导出格式',
|
||||
options: tool.dictList('DCGS')
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '条码前缀：',
|
||||
name: 'barcodePrefix',
|
||||
type: 'a-input',
|
||||
span: 12,
|
||||
attrs: {
|
||||
placeholder: '请输入条码前缀',
|
||||
allowClear: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '内码前缀：',
|
||||
name: 'barcodeInteriorPrefix',
|
||||
type: 'a-input',
|
||||
span: 12,
|
||||
attrs: {
|
||||
placeholder: '请输入内码前缀',
|
||||
allowClear: true
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
export const formRules = {
|
||||
name: [required('请输入码包配置名称')],
|
||||
productCodeConfigId: [required('请选择条码类型')],
|
||||
exportFormat: [required('请选择导出格式')]
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-card class="mt-4" :bordered="false" title="码包配置">
|
||||
<s-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:alert="options.alert.show"
|
||||
bordered
|
||||
:row-key="(record) => record.id"
|
||||
:tool-config="options.toolConfig"
|
||||
:scroll="{
|
||||
x: 100
|
||||
}"
|
||||
>
|
||||
<template #operator>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="packetConfigFormRef.onOpen()">
|
||||
<template #icon><plus-outlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'index'">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'exportFormat'">
|
||||
{{ $TOOL.dictTypeData('DCGS', record.exportFormat) }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a @click="packetConfigFormRef.onOpen({ ...record, pageType: 'SEARCH' })">
|
||||
<EyeOutlined />
|
||||
查看
|
||||
</a>
|
||||
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
更多
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="packetConfigFormRef.onOpen({ ...record, pageType: 'EDIT' })"
|
||||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<FormOutlined />
|
||||
编辑
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button type="link" danger size="small" @click="deleteRecord(record)">
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</s-table>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
<packet-config-form ref="packetConfigFormRef" @successful="successful"></packet-config-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// const props = defineProps({})
|
||||
|
||||
// const emit = defineEmits()
|
||||
|
||||
// 生命周期钩子
|
||||
import { packetColumn } from '@/views/productionBusiness/control/codeOrigin/columns/columns'
|
||||
import { useTableManagement } from '@/hook/useTableManagement'
|
||||
import productCodePackageConfigApi from '@/api/production/productcode/productCodePackageConfigApi'
|
||||
import PacketConfigForm from '@/views/productionBusiness/control/codeOrigin/detail/packetConfigForm.vue'
|
||||
|
||||
const packetConfigFormRef = ref(null)
|
||||
|
||||
const { searchFormState, tableRef, selectedRowKeys, columns, loadData, deleteBatchRecords, options, deleteRecord } =
|
||||
useTableManagement(
|
||||
{
|
||||
page: productCodePackageConfigApi.productCodePackageConfigPage,
|
||||
delete: productCodePackageConfigApi.productCodePackageConfigDelete
|
||||
},
|
||||
packetColumn,
|
||||
['materialEdit', 'materialDelete']
|
||||
)
|
||||
|
||||
const successful = () => {
|
||||
tableRef.value.refresh()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log('Component mounted')
|
||||
// TODO: Add your onMounted code here
|
||||
})
|
||||
|
||||
onUpdated(() => {
|
||||
console.log('Component updated')
|
||||
// TODO: Add your onUpdated code here
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
console.log('Component unmounted')
|
||||
// TODO: Add your onUnmounted code here
|
||||
})
|
||||
|
||||
// watch(() => {}, () => {})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="6">
|
||||
<a-form-item label="标签" name="number">
|
||||
<a-input v-model:value="searchFormState.number" placeholder="请输入编码" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="编码" name="number">
|
||||
<a-input v-model:value="searchFormState.number" placeholder="请输入编码" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="名称" name="name">
|
||||
<a-input v-model:value="searchFormState.name" placeholder="请输入名称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="可用状态" name="enabledState">
|
||||
<a-select
|
||||
v-model:value="searchFormState.enabledState"
|
||||
placeholder="请选择可用状态"
|
||||
:options="$TOOL.dictList('COMMON_STATUS')"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-button type="primary" @click="tableRef.refresh()">查询</a-button>
|
||||
<a-button style="margin: 0 8px" @click="reset">重置</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<a-card :bordered="false" class="mt-4" style="height: 100%">
|
||||
<s-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
bordered
|
||||
:tool-config="options.toolConfig"
|
||||
:scroll="{
|
||||
x: 100
|
||||
}"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'number'">
|
||||
<span style="color: #1890ff">{{ record.number }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'enabledState'">
|
||||
<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
|
||||
<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a @click="handleDownload(record)" v-if="hasPerm('customerEdit')">
|
||||
<VerticalAlignBottomOutlined />
|
||||
下载码包
|
||||
</a>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</s-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup name="records">
|
||||
import { useTableManagement } from '@/hook/useTableManagement'
|
||||
import { regionColumn } from '@/views/productionBusiness/control/codeOrigin/columns/columns'
|
||||
import produceBarcodeHistoryApi from '@/api/production/productcode/produceBarcodeHistoryApi'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
|
||||
const tagModalRef = ref(null)
|
||||
|
||||
const handleOpenTag = (record) => {
|
||||
tagModalRef.value.openModal(record)
|
||||
}
|
||||
|
||||
const handleDownload = (record) => {
|
||||
Modal.confirm({
|
||||
title: '确认下载？',
|
||||
content: '点击确认下载此条记录的码包',
|
||||
onOk() {
|
||||
console.log('OK')
|
||||
produceBarcodeHistoryApi
|
||||
.produceBarcodeHistoryAgainExport({
|
||||
id: record.id
|
||||
})
|
||||
.then((res) => {
|
||||
message.success('下载成功')
|
||||
})
|
||||
.catch(() => {
|
||||
message.error('下载失败')
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const {
|
||||
searchFormState,
|
||||
tableRef,
|
||||
selectedRowKeys,
|
||||
columns,
|
||||
loadData,
|
||||
reset,
|
||||
deleteBatchRecords,
|
||||
options,
|
||||
searchFormRef,
|
||||
navigateTo,
|
||||
deleteRecord
|
||||
} = useTableManagement(
|
||||
{
|
||||
page: produceBarcodeHistoryApi.produceBarcodeHistoryPage
|
||||
},
|
||||
regionColumn,
|
||||
['sysBrandEdit', 'sysBrandDelete']
|
||||
)
|
||||
</script>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
export const personnelColumn = [
|
||||
{
|
||||
title: '编码',
|
||||
dataIndex: 'number',
|
||||
sorter: true,
|
||||
sortDirections: ['descend', 'ascend'],
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '可用状态',
|
||||
dataIndex: 'enabledState',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '是否合适',
|
||||
dataIndex: 'isFit',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '入群',
|
||||
dataIndex: 'isJoinGroup',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'gender',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
dataIndex: 'categoryName',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '电话号码',
|
||||
dataIndex: 'phone',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
}
|
||||
]
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'number'">
|
||||
<a href="#">{{ record.number }}</a>
|
||||
<span style="color: #1890ff;">{{ record.number }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'enabledState'">
|
||||
<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
|
||||
|
|
@ -99,7 +99,6 @@
|
|||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a-tooltip title="查看">
|
||||
<a
|
||||
@click="
|
||||
navigateTo('/employee/personnel/detail', {
|
||||
|
|
@ -110,33 +109,48 @@
|
|||
v-if="hasPerm('customerEdit')"
|
||||
>
|
||||
<EyeOutlined />
|
||||
<!-- 查看-->
|
||||
查看
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
|
||||
<a-tooltip title="查看">
|
||||
<a
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
更多
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="
|
||||
navigateTo('/employee/personnel/detail', {
|
||||
type: 'EDIT',
|
||||
id: record.id
|
||||
})
|
||||
"
|
||||
v-if="hasPerm('customerEdit')"
|
||||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<FormOutlined />
|
||||
<!-- 编辑-->
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
|
||||
<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
|
||||
<DeleteOutlined />
|
||||
<!-- 删除-->
|
||||
编辑
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
v-if="hasPerm('materialDelete')"
|
||||
@click="deleteRecord(record)"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -152,74 +166,7 @@
|
|||
import employeeCategoryApi from '@/api/base/employee/employeeCategoryApi'
|
||||
import { useTableManagement } from '@/hook/useTableManagement'
|
||||
import PersonnelCategoryForm from '@/views/productionBusiness/employee/personnel/detail/personnelCategoryForm.vue'
|
||||
|
||||
const materielColumn = [
|
||||
{
|
||||
title: '编码',
|
||||
dataIndex: 'number',
|
||||
sorter: true,
|
||||
sortDirections: ['descend', 'ascend'],
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '可用状态',
|
||||
dataIndex: 'enabledState',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '是否合适',
|
||||
dataIndex: 'isFit',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '入群',
|
||||
dataIndex: 'isJoinGroup',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'gender',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
dataIndex: 'categoryName',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '电话号码',
|
||||
dataIndex: 'phone',
|
||||
align: 'center',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
ellipsis: true
|
||||
}
|
||||
]
|
||||
import { personnelColumn } from '@/views/productionBusiness/employee/personnel/columns/materielColumn'
|
||||
|
||||
const personnelCategoryFormRef = ref(null)
|
||||
const dynamicTreeRef = ref(null)
|
||||
|
|
@ -241,7 +188,7 @@
|
|||
page: employeeApi.employeePage,
|
||||
delete: employeeApi.employeeDelete
|
||||
},
|
||||
materielColumn,
|
||||
personnelColumn,
|
||||
['customerEdit', 'customerDelete']
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<a-card :bordered="false" class="mt-4">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="人员信息">
|
||||
<a-table :dataSource="dataSource" :columns="columns" :pagination="false">
|
||||
<a-table :dataSource="dataSource" :columns="columns" :pagination="false" bordered>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'index'">
|
||||
{{ index + 1 }}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'number'">
|
||||
<a href="#">{{ record.number }}</a>
|
||||
<span style="color: #1890ff">{{ record.number }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'enabledState'">
|
||||
<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
|
||||
|
|
@ -90,38 +90,59 @@
|
|||
v-if="hasPerm('customerEdit')"
|
||||
>
|
||||
<EyeOutlined />
|
||||
<!-- 查看-->
|
||||
查看
|
||||
</a>
|
||||
</a-tooltip>
|
||||
<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
|
||||
<a-tooltip title="编辑">
|
||||
<a
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
更多
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="
|
||||
navigateTo('/employee/personnelReport/detail', {
|
||||
type: 'EDIT',
|
||||
id: record.id
|
||||
})
|
||||
"
|
||||
v-if="hasPerm('customerEdit')"
|
||||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<FormOutlined />
|
||||
</a>
|
||||
</a-tooltip>
|
||||
<!-- <a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
|
||||
<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
|
||||
<DeleteOutlined />
|
||||
<!– 删除–>
|
||||
编辑
|
||||
</a-button>
|
||||
</a-popconfirm>-->
|
||||
|
||||
<a-divider type="vertical"></a-divider>
|
||||
<a-tooltip title="添加标签">
|
||||
<a @click="handleOpenTag(record)" :style="{ color: record.tagColor }">
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
v-if="hasPerm('materialDelete')"
|
||||
@click="deleteRecord(record)"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleOpenTag(record)"
|
||||
:style="{ color: record.tagColor }"
|
||||
>
|
||||
<TagFilled />
|
||||
<!-- 查看-->
|
||||
</a>
|
||||
</a-tooltip>
|
||||
标签
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,127 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<AdvancedSearchForm
|
||||
:formState="searchFormState"
|
||||
:formFields="searchFields"
|
||||
@search="tableRef.refresh()"
|
||||
@reset="tableRef.refresh()"
|
||||
/>
|
||||
|
||||
<a-card :bordered="false" class="mt-4" style="height: 100%">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="6">
|
||||
<dynamic-tree
|
||||
ref="dynamicTreeRef"
|
||||
treeTitle="物料分类"
|
||||
:tableRef="tableRef"
|
||||
:openFormRef="materialCategoryFormRef"
|
||||
:apiModel="{
|
||||
getTree: materialCategoryApi.materialCategoryTree,
|
||||
delTree: materialCategoryApi.materialCategoryDelete
|
||||
}"
|
||||
@selectTree="selectTree"
|
||||
@delTree="delTree"
|
||||
@treeRefresh="treeRefresh"
|
||||
:toolConfig="{
|
||||
plus: false,
|
||||
edit: false,
|
||||
delete: false,
|
||||
refresh: true
|
||||
}"
|
||||
></dynamic-tree>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<s-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:alert="options.alert.show"
|
||||
bordered
|
||||
:row-key="(record) => record.id"
|
||||
:tool-config="options.toolConfig"
|
||||
:scroll="{
|
||||
x: 100
|
||||
}"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'number'">
|
||||
<span style="color: #0d84ff">{{ record.number }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'enabledState'">
|
||||
<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
|
||||
<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'type'">
|
||||
{{ $TOOL.dictTypeData('OFFICIAL_ACCOUNT_TYPE', record.type) }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a> 打印标签 </a>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</s-table>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<material-category-form ref="materialCategoryFormRef" @successful="successful"></material-category-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// const props = defineProps({})
|
||||
<script setup name="materiel">
|
||||
import materialApi from '@/api/base/material/materialApi'
|
||||
import materialCategoryApi from '@/api/base/material/materialCategoryApi'
|
||||
|
||||
// const emit = defineEmits()
|
||||
import MaterialCategoryForm from '@/views/productionBusiness/basicData/materiel/detail/materialCategoryForm.vue'
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
console.log('Component mounted')
|
||||
// TODO: Add your onMounted code here
|
||||
})
|
||||
import { useTableManagement } from '@/hook/useTableManagement'
|
||||
import { materielColumn } from '@/views/productionBusiness/basicData/materiel/column/materiel-column'
|
||||
import { searchFields } from '@/views/productionBusiness/basicData/materiel/formFields/searchFields'
|
||||
|
||||
onUpdated(() => {
|
||||
console.log('Component updated')
|
||||
// TODO: Add your onUpdated code here
|
||||
})
|
||||
const materialCategoryFormRef = ref(null)
|
||||
const dynamicTreeRef = ref(null)
|
||||
|
||||
onUnmounted(() => {
|
||||
console.log('Component unmounted')
|
||||
// TODO: Add your onUnmounted code here
|
||||
})
|
||||
const {
|
||||
searchFormState,
|
||||
tableRef,
|
||||
selectedRowKeys,
|
||||
columns,
|
||||
loadData,
|
||||
deleteBatchRecords,
|
||||
options,
|
||||
navigateTo,
|
||||
deleteRecord
|
||||
} = useTableManagement(
|
||||
{
|
||||
page: materialApi.materialPage,
|
||||
delete: materialApi.materialDelete
|
||||
},
|
||||
materielColumn,
|
||||
['materialEdit', 'materialDelete']
|
||||
)
|
||||
|
||||
// watch(() => {}, () => {})
|
||||
const selectTree = (value) => {
|
||||
searchFormState.value.categoryId = value.id
|
||||
tableRef.value.refresh()
|
||||
}
|
||||
|
||||
const treeRefresh = () => {
|
||||
searchFormState.value.categoryId = null
|
||||
tableRef.value.refresh()
|
||||
}
|
||||
|
||||
const delTree = () => {
|
||||
searchFormState.value.categoryId = null
|
||||
tableRef.value.refresh()
|
||||
}
|
||||
|
||||
const successful = () => {
|
||||
searchFormState.value.categoryId = null
|
||||
tableRef.value.refresh()
|
||||
|
||||
dynamicTreeRef.value.loadTreeData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
dynamicTreeRef.value.loadTreeData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<a-card title="产码中心">
|
||||
<a-form :model="formData" ref="formRef">
|
||||
<a-row :gutter="[20]">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="码包配置" name="packageConfigId" :rules="[{ required: true, message: '请选择码包配置' }]">
|
||||
<a-select
|
||||
:options="codeOptions"
|
||||
placeholder="请选择码包配置"
|
||||
:field-names="{
|
||||
value: 'id',
|
||||
label: 'name'
|
||||
}"
|
||||
v-model:value="formData.packageConfigId"
|
||||
></a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="导出数量" name="count" :rules="[{ required: true, message: '请选择导出数量' }]">
|
||||
<a-input-number
|
||||
v-model:value="formData.count"
|
||||
style="width: 100%"
|
||||
placeholder="请输入导出数量"
|
||||
></a-input-number>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="示例">
|
||||
<a-input disabled style="width: 100%" placeholder="显示导出示例格式"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<a-space>
|
||||
<a-button @click="handleClick">生成</a-button>
|
||||
<!-- <a-button>下载</a-button>-->
|
||||
</a-space>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// const props = defineProps({})
|
||||
|
||||
// const emit = defineEmits()
|
||||
|
||||
// 生命周期钩子
|
||||
import productCodePackageConfigApi from '@/api/production/productcode/productCodePackageConfigApi'
|
||||
import productcodeApi from '@/api/production/productcode/productcodeApi'
|
||||
import { message } from 'ant-design-vue'
|
||||
import downloadUtil from '@/utils/downloadUtil'
|
||||
let codeOptions = ref([])
|
||||
const formData = ref({})
|
||||
const formRef = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
console.log('Component mounted')
|
||||
// TODO: Add your onMounted code here
|
||||
|
||||
productCodePackageConfigApi.productCodePackageConfigList().then((res) => {
|
||||
codeOptions.value = res
|
||||
})
|
||||
})
|
||||
|
||||
const handleClick = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
productcodeApi.productCodeSchemeProduce(formData.value).then((res) => {
|
||||
downloadUtil.resultDownload(res)
|
||||
// message.success('生成成功')
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log('error', error)
|
||||
})
|
||||
}
|
||||
|
||||
onUpdated(() => {
|
||||
console.log('Component updated')
|
||||
// TODO: Add your onUpdated code here
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
console.log('Component unmounted')
|
||||
// TODO: Add your onUnmounted code here
|
||||
})
|
||||
|
||||
// watch(() => {}, () => {})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,4 +1,20 @@
|
|||
export const reportColumns = [
|
||||
{
|
||||
title: '单号',
|
||||
dataIndex: 'billNumber',
|
||||
width: 200,
|
||||
resizable: true,
|
||||
align: 'center',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '源单号',
|
||||
dataIndex: 'sourceBillNumber',
|
||||
width: 200,
|
||||
resizable: true,
|
||||
align: 'center',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '业务日期',
|
||||
dataIndex: 'businessDate',
|
||||
|
|
@ -9,14 +25,14 @@ export const reportColumns = [
|
|||
sortDirections: ['descend', 'ascend'],
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
/*{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
width: 200,
|
||||
resizable: true,
|
||||
align: 'center',
|
||||
ellipsis: true
|
||||
},
|
||||
},*/
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'produceType',
|
||||
|
|
|
|||
|
|
@ -57,7 +57,6 @@
|
|||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a-tooltip title="查看">
|
||||
<a
|
||||
@click="
|
||||
navigateTo('/report/detail', {
|
||||
|
|
@ -68,8 +67,8 @@
|
|||
v-if="hasPerm('customerEdit')"
|
||||
>
|
||||
<EyeOutlined />
|
||||
查看
|
||||
</a>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -78,7 +78,6 @@
|
|||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a-tooltip title="查看">
|
||||
<a
|
||||
@click="
|
||||
navigateTo('/task/detail', {
|
||||
|
|
@ -89,39 +88,62 @@
|
|||
v-if="hasPerm('customerEdit')"
|
||||
>
|
||||
<EyeOutlined />
|
||||
<!-- 查看-->
|
||||
查看
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider
|
||||
type="vertical"
|
||||
v-if="hasPerm(['customerEdit', 'customerDelete'], 'and') && record.state === '1'"
|
||||
/>
|
||||
<a-tooltip title="编辑">
|
||||
<a
|
||||
<a-dropdown v-if="record.state === '1'">
|
||||
<a class="ant-dropdown-link" @click.prevent>
|
||||
更多
|
||||
<DownOutlined />
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="
|
||||
navigateTo('/task/detail', {
|
||||
type: 'EDIT',
|
||||
id: record.id
|
||||
})
|
||||
"
|
||||
v-if="hasPerm('customerEdit') && record.state === '1'"
|
||||
v-if="hasPerm('sysUnitEdit')"
|
||||
>
|
||||
<FormOutlined />
|
||||
<!-- 编辑-->
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
<a-divider
|
||||
type="vertical"
|
||||
v-if="hasPerm(['customerEdit', 'customerDelete'], 'and') && record.state === '1'"
|
||||
/>
|
||||
<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
|
||||
<a-button type="link" danger size="small" v-if="hasPerm('customerDelete') && record.state === '1'">
|
||||
<DeleteOutlined />
|
||||
<!-- 删除-->
|
||||
编辑
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
v-if="hasPerm('materialDelete')"
|
||||
@click="deleteRecord(record)"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleOpenTag(record)"
|
||||
:style="{ color: record.tagColor }"
|
||||
>
|
||||
<TagFilled />
|
||||
标签
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue