新增 客户组别弹窗
This commit is contained in:
yf
parent
830ce9d3af
commit
72d5375658
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<Dialog :title="dialogTitle" append-to-body v-model="dialogVisible">
|
||||
<Form :disabled="disabled" ref="formRef" :schema="allSchemas.formSchema" :rules="rules" v-loading="formLoading" />
|
||||
|
||||
<template #footer>
|
||||
<el-button v-if="!disabled" @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
|
||||
import { rules, allSchemas } from './config.data'
|
||||
import {CustomerGroupApi, CustomerGroupVO} from "@/api/oms/customergroup";
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
const disabled = computed(() => {
|
||||
return formType.value !== 'create' && formType.value !== 'update'
|
||||
})
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = await CustomerGroupApi.getCustomerGroup(id)
|
||||
formRef.value.setValues(data)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
const valid = await formRef.value.getElFormRef().validate()
|
||||
if (!valid) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formRef.value.formModel as CustomerGroupVO
|
||||
if (formType.value === 'create') {
|
||||
await CustomerGroupApi.createCustomerGroup(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await CustomerGroupApi.updateCustomerGroup(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
|
||||
|
||||
// 表单校验
|
||||
export const rules = reactive({
|
||||
|
||||
})
|
||||
|
||||
// CrudSchema https://doc.iocoder.cn/vue3/crud-schema/
|
||||
const crudSchemas = reactive<CrudSchema[]>([
|
||||
|
||||
{
|
||||
label: 'code',
|
||||
field: 'code',
|
||||
width: 200,
|
||||
isSearch: true,
|
||||
},
|
||||
{
|
||||
label: 'name',
|
||||
field: 'name',
|
||||
isSearch: true,
|
||||
},
|
||||
{
|
||||
label: 'remark',
|
||||
field: 'remark',
|
||||
isTable: false,
|
||||
},
|
||||
{
|
||||
label: 'options',
|
||||
field: 'action',
|
||||
isForm: false
|
||||
}
|
||||
])
|
||||
export const { allSchemas } = useCrudSchemas(crudSchemas)
|
||||
|
|
@ -0,0 +1,319 @@
|
|||
<template>
|
||||
<slot>
|
||||
<div>
|
||||
<el-input
|
||||
v-model="that.showValue"
|
||||
clearable
|
||||
:placeholder="props.placeholder"
|
||||
@clear="clearData"
|
||||
@click="viewDetails"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click.stop="openDialog">
|
||||
<Icon icon="ep:search"/>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</slot>
|
||||
{{tmp}}
|
||||
<Dialog
|
||||
:title="dialogTitle"
|
||||
width="80%"
|
||||
append-to-body
|
||||
v-model="that.visible"
|
||||
@close="updateVisible(false)">
|
||||
<div>
|
||||
<!-- 搜索工作栏 -->
|
||||
<ContentWrap>
|
||||
<Search
|
||||
:schema="allSchemas.searchSchema"
|
||||
:is-col="false"
|
||||
@search="setSearchParams"
|
||||
@reset="setSearchParams">
|
||||
<!-- 新增等操作按钮 -->
|
||||
<template #actionMore>
|
||||
<el-button v-if="isCanEdit"
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['oms:draft-design-data:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px"/>
|
||||
新增
|
||||
</el-button>
|
||||
<div v-else>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<Table
|
||||
:columns="allSchemas.tableColumns"
|
||||
:data="tableObject.tableList"
|
||||
:loading="tableObject.loading"
|
||||
:selection="true"
|
||||
ref="tableRef"
|
||||
@selection-change="selectionChange"
|
||||
:pagination="{ total: tableObject.total
|
||||
}"
|
||||
v-model:pageSize="tableObject.pageSize"
|
||||
v-model:currentPage="tableObject.currentPage"
|
||||
>
|
||||
<template #action="{ row }">
|
||||
<div v-if="isCanEdit">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', row.id)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
-
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
</ContentWrap>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="updateVisible(false,true)">{{ t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit">{{ t('common.ok') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</Dialog>
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<DataForm ref="formRef" @success="getList"/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="ProductTypeDataListDialog">
|
||||
import {allSchemas} from './config.data'
|
||||
|
||||
import DataForm from './DataForm.vue'
|
||||
import {CustomerGroupApi} from "@/api/oms/customergroup";
|
||||
|
||||
|
||||
defineOptions({name: 'CustomerGroupDataListDialog'})
|
||||
const emit = defineEmits(['update:modelValue', 'update:visible', 'submit']) // 定义 success 事件，用于操作成功后的回调
|
||||
|
||||
const {t} = useI18n() // 国际化
|
||||
|
||||
const dialogTitle = ref('Customer group') // 弹窗的标题
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [String,Number],
|
||||
required: true
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'id'
|
||||
},
|
||||
showKey: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'name'
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
isCanEdit: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
|
||||
placeholder: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'selectText'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '64px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '64px'
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const that = reactive({
|
||||
inputVal: '',
|
||||
showValue: '',
|
||||
visible: false,
|
||||
})
|
||||
const toStr = (data: any, def = '') => {
|
||||
if (data !== null && data !== undefined) {
|
||||
return `${data}`
|
||||
}
|
||||
return def
|
||||
}
|
||||
const openDialog = () => {
|
||||
updateVisible(true);
|
||||
}
|
||||
const viewDetails = () => {
|
||||
if (that.inputVal) {
|
||||
openForm("preview", that.inputVal.split(",")[0])
|
||||
} else {
|
||||
openDialog();
|
||||
}
|
||||
}
|
||||
let map = new Map();
|
||||
const initInput = async () => {
|
||||
const dataKey = that.inputVal + ',' + props.dataKey + ',' + props.showKey + ',' + props.multiple;
|
||||
if (map.has(dataKey)) {
|
||||
const data = map.get(dataKey)
|
||||
if (data) {
|
||||
that.inputVal = data.inputVal
|
||||
that.showValue = data.showValue
|
||||
console.log('缓存数据', data)
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const ids = that.inputVal.split(",");
|
||||
let tmpInput = [];
|
||||
let tmpShow = [];
|
||||
for (let i = 0; i < ids.length; i++) {
|
||||
const data = await CustomerGroupApi.getCustomerGroup(ids[i])
|
||||
tmpInput.push(data[props.dataKey]);
|
||||
tmpShow.push(data[props.showKey]);
|
||||
}
|
||||
that.inputVal = tmpInput.join(',');
|
||||
that.showValue = tmpShow.join(',');
|
||||
map.set(dataKey, {
|
||||
inputVal: that.inputVal,
|
||||
showValue: that.showValue
|
||||
})
|
||||
}
|
||||
watch(() => props.visible, (newVal) => {
|
||||
that.visible = newVal;
|
||||
|
||||
})
|
||||
|
||||
watch(() => props.modelValue, (newVal)=>{
|
||||
that.inputVal = toStr(newVal,'')
|
||||
if (that.inputVal) {
|
||||
initInput();
|
||||
}
|
||||
},{
|
||||
immediate: true
|
||||
})
|
||||
// 用监听属性变化无其他意义
|
||||
const tmp = computed(()=>{
|
||||
setTimeout(()=>{
|
||||
that.inputVal = toStr(props.modelValue,that.inputVal)
|
||||
if (that.inputVal) {
|
||||
initInput();
|
||||
}
|
||||
},100)
|
||||
return ''
|
||||
},{deep: true})
|
||||
|
||||
|
||||
const clearData = () => {
|
||||
that.inputVal = '';
|
||||
that.showValue = '';
|
||||
updateValue();
|
||||
}
|
||||
const updateVisible = (visible: boolean, clearInput = false) => {
|
||||
that.visible = visible;
|
||||
emit("update:visible", visible)
|
||||
if (clearInput) {
|
||||
clearData();
|
||||
}
|
||||
}
|
||||
defineExpose({}) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
const submit = () => {
|
||||
updateValue();
|
||||
updateVisible(false)
|
||||
}
|
||||
const updateValue = () => {
|
||||
emit("update:modelValue", that.inputVal)
|
||||
}
|
||||
//
|
||||
const selectionChange = (row) => {
|
||||
if (row && row.length > 0) {
|
||||
if (props.multiple) {
|
||||
that.inputVal = row.map(item => item[props.dataKey || 'id']).join(',')
|
||||
that.showValue = row.map(item => item[props.showKey || 'id']).join(',')
|
||||
} else {
|
||||
if (row.length > 1) {
|
||||
useMessage().warning('单选数据，已忽略其他')
|
||||
}
|
||||
that.showValue = row[row.length - 1][props.showKey || 'id']
|
||||
that.inputVal = row[row.length - 1][props.dataKey || 'id']
|
||||
}
|
||||
} else {
|
||||
that.inputVal = ''
|
||||
that.showValue = ''
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const {tableObject, tableMethods} = useTable({
|
||||
getListApi: CustomerGroupApi.getCustomerGroupPage, // 分页接口
|
||||
delListApi: CustomerGroupApi.deleteCustomerGroup // 删除接口
|
||||
})
|
||||
// 获得表格的各种操作
|
||||
const {getList, setSearchParams} = tableMethods
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = (id: number) => {
|
||||
tableMethods.delList(id, false)
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
position: relative;
|
||||
|
||||
.el-input__inner {
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue