ci-plus
Version:
ci组件库
288 lines (279 loc) • 10.2 kB
Markdown
## 使用示例
```ts
const useBackStoreM = defineStore(
'MaterialWarehouse-MaterialsPreparationNotice-index',
() => {
const ifshow = ref(true)
type Scoped = Scope<MPNRes>
const store: ReturnType<
ReturnType<typeof getOptStore<MPNRes, any, any, any, { ids: number[] }>>
> = getOptStore<MPNRes, any, any, any, { ids: number[] }>({
model: 'material_preparation_notice_list', // 请求地址：material_preparation_notice_list_post
id: 'MaterialWarehouse-MaterialsPreparationNotice-index', // 配置存储的id（约定项目名称-模块名称-页面名称）
name: '材料库_备料通知',
storage_type: '', //CHUKU
params: { limit: 20, storage_type: 'CAILIAO' },
baseUrl: storageModule,
setId: true,
ifInitData: false, // 是否初始请求表格数据
sortColumn: [
{ col: { width: 60, label: '序号', type: 'index', fixed: 'left' } },
{
col: { width: 130, label: '计划开始时间', prop: 'plan_start_date' },
// 示例1：日期格式
header(createVNode: any) {
return createVNode(HeaderInput, {
text: '计划开始时间',
column: 'plan_start_date',
storePar: store.params.value,
type: 'date',
placeholder: '请选择...',
popperStyle: { width: '450px', height: '300px' },
onChange(val: any) {
console.log('val: ', val)
store.HEADERSEARCH(val)
console.log('当前的参数: ', store.params.value)
},
ordersConfig: { enableOrder: true },
})
},
},
{
col: { width: 330, label: '物料编码', prop: 'material_info', },
// 示例2：输入框(简写)
header(createVNode: any) {
return createVNode(HeaderInput, {
text: '物料编码|物料名称|物料型号',
column: 'material_info',
storePar: store.params.value,
placeholder: '请输入关键字...',
onChange(val: any) {
store.HEADERSEARCH(val)
},
})
},
},
{
col: { width: 150, label: '产线', prop: 'line_name' },
// 示例3：输入框
header(createVNode: any) {
return createVNode(HeaderInput, {
text: '产线',
column: 'line_name',
storePar: store.params.value,
type: 'text',
disableFilter: false,// 关闭筛选功能true
selectConfig: {},
placeholder: '请输入关键字...',
onChange(val: any) {
console.log('val: ', val)
store.HEADERSEARCH(val)
console.log('当前的参数: ', store.params.value)
},
onGetstore(val: any) {
console.log('val: ', val)
console.log('当前的参数: ', store.params.value)
},
ordersConfig: { enableOrder: false }, // 开启排序功能true
})
},
},
{
col: {
width: 100,
label: '通用件库存',
prop: 'common_parts_inventory_count',
},
component(createVNode, { row }: Scoped) {
return createVNode(
'div',
{
style: {
color: `${row.common_parts_inventory_count < row.count
? 'red'
: 'black'
}`,
}, // 行内样式
class: 'flex-a-c', // 添加一个flex-a-c的class名称
},
row.common_parts_inventory_count,
)
},
},
{
col: { width: 100, label: '状态', prop: 'state', fixed: 'right' },
component(createVNode, { row }: Scoped) {
let { type, val } = setLibraryName(row.state)
if (val) {
return createVNode(ElTag, { type, class: 'ml-2' }, () => val)
} else {
return createVNode('div', [val])
}
},
// 示例4：下拉选择框(多选)
header(createVNode: any) {
return createVNode(HeaderInput, {
text: '状态',
column: 'state',
storePar: store.params.value,
type: 'select',
selectConfig: {
options: [
{ value: '0', label: '备货中' },
{ value: '1', label: '已备货' },
],
selectMultiple: true, // 是否多选
},
placeholder: '请选择...',
onChange(val: any) {
console.log('val: ', val)
store.HEADERSEARCH(val)
console.log('当前的参数: ', store.params.value)
},
})
},
},
{
col: {
width: 100,
label: '操作',
prop: 'state',
fixed: 'right',
},
component(createVNode: any, { row }: Scoped) {
// 单元格内容为一个开关 ElSwitch 组件
return createVNode(ElSwitch, {
style: {
'--el-switch-on-color': '#13ce66',
'--el-switch-off-color': '#e6a23c',
},
modelValue: row.state === 0 ? false : true, //ifshow.value,
inlinePrompt: true,
activeText: '备货完成',
inactiveText: '备货中',
'onUpdate:modelValue': (newValue: any) => {
console.log('newValue: ', newValue)
// ifshow.value = newValue
row.state = newValue ? 1 : 0
materialPreparationCompleted(
[row],
store.loading,
store.UPDATEPOST,
)
},
// 点击事件
onClick: (event: MouseEvent) => {
event.stopPropagation() // 阻止事件冒泡
},
// 禁用状态
disabled:
Number(row.material_preparation_count) >= Number(row.count)
? true
: false,
})
},
header(createVNode: any) {
return createVNode(HeaderInput, {
text: '操作',
column: 'state',
storePar: store.params.value,
type: 'select',
initValue: '0',
popperStyle: { width: '300px', height: '150px' },
selectConfig: {
options: [
{ value: '0', label: '备货中' },
{ value: '1', label: '已备货' },
],
selectMultiple: true, // 是否多选
},
placeholder: '请选择...',
onChange(val: any) {
console.log('val: ', val)
store.HEADERSEARCH(val)
console.log('当前的参数: ', store.params.value)
},
})
},
},
{
col: { label: '操作', prop: '', width: 240 },
// 单元格中渲染2个普通按钮组件
component(createVNode, { row }: Scoped) {
return createVNode('div', [
createVNode(
ElButton,
{
size: 'small',
type: 'warning',
color: '#2193b0',
onClick(evt) {
evt.stopPropagation() // 阻止冒泡事件
console.log('修改', row)
},
},
() => '公司详情记录',
),
createVNode(
ElButton,
{
size: 'small',
color: '#2c56a0',
onClick(evt) {
evt.stopPropagation() // 阻止冒泡事件
console.log('编辑', row)
},
},
() => '条款详情记录',
),
])
},
},
{
col: { width: 180, label: '操作', prop: '' },
component(createVNode, { row }: Scoped) {
// 单元格中渲染3个图标按钮组件
return createVNode('div', [
createVNode(ElButton, {
size: 'small',
type: 'warning',
icon: View, // 查看
color: '#2193b0',
onClick(evt) {
evt.stopPropagation() // 阻止冒泡事件
console.log('查看', row)
console.log('detailsRef', detailsRef.value)
// detailsRef.value?.showMydia()
onSeeDetails(detailsRef.value, row)
},
}),
createVNode(
ElButton,
{
size: 'small',
icon: EditPen,
onClick(evt) {
evt.stopPropagation() // 阻止冒泡事件
onAdd(true, addRef.value, row)
},
}, //, () => '修改'
),
createVNode(ElButton, {
size: 'small',
type: 'danger',
icon: Delete,
onClick(evt) {
evt.stopPropagation() // 阻止冒泡事件
console.log('修改', row)
deleteOpen([row.id], store.UPDATEPOST)
},
}),
])
},
},
],
})()
return store
},
)
```