移除客服账号和话术管理页面中新增按钮的自定义样式类
This commit is contained in:
WUSIJIAN
193
src/views/assets/category/component/editCategory.vue
Normal file
193
src/views/assets/category/component/editCategory.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="assets-edit-category-container">
|
||||
<el-dialog :title="isEdit ? '修改分类' : '添加分类'" v-model="isShowDialog" width="500px">
|
||||
<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
|
||||
<el-form-item label="上级分类">
|
||||
<el-cascader
|
||||
v-model="ruleForm.parentId"
|
||||
:options="categoryData"
|
||||
:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name', children: 'children' }"
|
||||
placeholder="请选择上级分类"
|
||||
clearable
|
||||
class="w100"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="请输入分类名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="ruleForm.type" placeholder="请选择类型" class="w100">
|
||||
<el-option label="商品" value="product" />
|
||||
<el-option label="服务" value="service" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-switch
|
||||
v-model="ruleForm.status"
|
||||
active-value="enabled"
|
||||
inactive-value="disabled"
|
||||
inline-prompt
|
||||
active-text="显示"
|
||||
inactive-text="隐藏"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default" :loading="submitLoading">{{ isEdit ? '修 改' : '添 加' }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'assetsEditCategory',
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { getCategoryTree, getCategory, addCategory, updateCategory } from '/@/api/assets/category';
|
||||
|
||||
interface CategoryRow {
|
||||
id: string;
|
||||
name: string;
|
||||
level: number;
|
||||
type: string;
|
||||
status: string;
|
||||
sort?: number;
|
||||
children?: CategoryRow[] | null;
|
||||
}
|
||||
|
||||
interface RuleForm {
|
||||
id: string;
|
||||
parentId: string;
|
||||
name: string;
|
||||
type: string;
|
||||
sort: number;
|
||||
status: string;
|
||||
}
|
||||
|
||||
const emit = defineEmits(['getCategoryList']);
|
||||
|
||||
const formRef = ref();
|
||||
const isShowDialog = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const submitLoading = ref(false);
|
||||
const categoryData = ref<CategoryRow[]>([]);
|
||||
|
||||
const ruleForm = reactive<RuleForm>({
|
||||
id: '',
|
||||
parentId: '',
|
||||
name: '',
|
||||
type: 'product',
|
||||
sort: 0,
|
||||
status: 'enabled',
|
||||
});
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择类型', trigger: 'change' }],
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
ruleForm.id = '';
|
||||
ruleForm.parentId = '';
|
||||
ruleForm.name = '';
|
||||
ruleForm.type = 'product';
|
||||
ruleForm.sort = 0;
|
||||
ruleForm.status = 'enabled';
|
||||
};
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: CategoryRow | string, edit?: boolean) => {
|
||||
resetForm();
|
||||
isEdit.value = edit || false;
|
||||
|
||||
// 获取分类树数据
|
||||
getCategoryTree().then((res: any) => {
|
||||
categoryData.value = res.data?.tree ?? [];
|
||||
});
|
||||
|
||||
if (row && typeof row === 'object' && edit) {
|
||||
// 修改模式：获取详情
|
||||
getCategory(row.id).then((res: any) => {
|
||||
const data = res.data;
|
||||
ruleForm.id = data.id || '';
|
||||
ruleForm.parentId = data.parentId || '';
|
||||
ruleForm.name = data.name || '';
|
||||
ruleForm.type = data.type || 'product';
|
||||
ruleForm.sort = data.sort || 0;
|
||||
ruleForm.status = data.status || 'enabled';
|
||||
});
|
||||
} else if (row && typeof row === 'string') {
|
||||
// 新增子分类模式：设置父级ID
|
||||
ruleForm.parentId = row;
|
||||
}
|
||||
|
||||
isShowDialog.value = true;
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
isShowDialog.value = false;
|
||||
};
|
||||
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
formRef.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
submitLoading.value = true;
|
||||
const submitData = { ...ruleForm };
|
||||
|
||||
if (isEdit.value) {
|
||||
// 修改
|
||||
updateCategory(submitData)
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功');
|
||||
closeDialog();
|
||||
emit('getCategoryList');
|
||||
})
|
||||
.finally(() => {
|
||||
submitLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
// 新增
|
||||
addCategory(submitData)
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功');
|
||||
closeDialog();
|
||||
emit('getCategoryList');
|
||||
})
|
||||
.finally(() => {
|
||||
submitLoading.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.w100 {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user