384 lines
13 KiB
Vue
384 lines
13 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 列表 -->
|
||
<template v-if="isA">
|
||
<!-- 搜索 -->
|
||
<page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
|
||
@reset-click="handleResetClick" />
|
||
|
||
<!-- 列表 -->
|
||
<page-content ref="contentRef" :content-config="contentConfig" @add-click="handleAddClick"
|
||
@edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
|
||
@toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
|
||
<template #deptName="scope">
|
||
<div style="display: inline-block;width: 50px;">
|
||
{{ scope.row.name }}
|
||
</div>
|
||
<!-- <el-text></el-text> -->
|
||
</template>
|
||
<template #status="scope">
|
||
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
|
||
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
||
</el-tag>
|
||
</template>
|
||
<template #gender="scope">
|
||
<DictLabel v-model="scope.row[scope.prop]" code="gender" />
|
||
</template>
|
||
<template #mobile="scope">
|
||
<el-text>{{ scope.row[scope.prop] }}</el-text>
|
||
<copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
|
||
</template>
|
||
<template #operates="scope">
|
||
<el-button type="text" size="small" v-if="scope.row.level < 3"
|
||
@click="addlowerLevel(scope.row)">添加下一级</el-button>
|
||
<el-button type="text" size="small" @click="handleEditClick(scope.row)">编辑</el-button>
|
||
<el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
|
||
</template>
|
||
</page-content>
|
||
<!-- 添加下一级-编辑 -->
|
||
<myDialog title="添加模板" width="50%" ref="myDialogRefs" @Confirm="subitgoods">
|
||
<el-form ref="forms" :model="datas.contentForm" :rules="datas.rules" label-width="80px" label-position="left">
|
||
<el-form-item label="规格名称" prop="name">
|
||
<el-input v-model="datas.contentForm.name" placeholder="请输入下一级名称"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</myDialog>
|
||
<!-- 新增 -->
|
||
<!-- <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
|
||
<template #gender="scope">
|
||
<Dict v-model="scope.formData[scope.prop]" code="gender" />
|
||
</template>
|
||
</page-modal> -->
|
||
<myDialog title="新增模板" width="50%" ref="myDialogRef" @Confirm="subitgood">
|
||
<el-form ref="form" :model="datas.contentForm" :rules="datas.rules" label-width="80px" label-position="left">
|
||
<el-form-item label="名称" prop="name">
|
||
<el-input v-model="datas.contentForm.name" placeholder="模板名称，如：衣服"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="item.name" v-for="(item, index) in datas.contentForm.children" :key="index">
|
||
<div class="tag_wrap">
|
||
<el-tag v-for="(val, i) in item.children" :key="i" closable size="medium" :disable-transitions="true"
|
||
@close="handleClose(index, i)">
|
||
{{ val.name }}
|
||
</el-tag>
|
||
<el-input class="input-new-tag" v-show="item.inputVisible" v-model="item.inputValue" ref="saveTagInput"
|
||
size="small" placeholder="请输入规格值，回车添加" @keyup.enter.native="handleInputConfirm(index)"
|
||
@blur="handleInputConfirm(index)">
|
||
</el-input>
|
||
<el-button v-show="!item.inputVisible" size="small" icon="Plus" plain @click="showInput(index)">
|
||
添加
|
||
</el-button>
|
||
<el-button size="small" icon="Delete" plain @click="deleteTag(index)">删除</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-form ref="skuForm" :model="datas.skuForm" :rules="datas.skuRules" label-width="80px" label-position="left">
|
||
<el-row :gutter="20" v-if="datas.showSkuForm">
|
||
<el-col :span="10">
|
||
<el-form-item label="规格" prop="skuValidate1">
|
||
<el-input v-model="datas.skuForm.label" placeholder="规格，如：尺码"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<el-form-item label="规格值" prop="skuValidate2">
|
||
<el-input v-model="datas.skuForm.value" placeholder="规格值，如：S、M"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button type="primary" @click="addSkuSubmit">添加</el-button>
|
||
<el-button @click="datas.showSkuForm = false">取消</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="Plus" @click="datas.showSkuForm = true">添加规格</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</myDialog>
|
||
<!-- 编辑 -->
|
||
<page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
|
||
<template #gender="scope">
|
||
<Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
|
||
</template>
|
||
</page-modal>
|
||
</template>
|
||
<template v-else>
|
||
<page-content ref="contentRef" :content-config="contentConfig2" @operat-click="handleOperatClick">
|
||
<template #status="scope">
|
||
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
|
||
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
||
</el-tag>
|
||
</template>
|
||
</page-content>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import UserAPI from "@/api/product/specificationsconfig";
|
||
import RoleAPI from "@/api/system/role";
|
||
import type { IObject, IOperatData } from "@/components/CURD/types";
|
||
import usePage from "@/components/CURD/usePage";
|
||
import addModalConfig from "./specificationsconfig/add";
|
||
import contentConfig from "./specificationsconfig/content";
|
||
import contentConfig2 from "./specificationsconfig/content2";
|
||
import editModalConfig from "./specificationsconfig/edit";
|
||
import searchConfig from "./specificationsconfig/search";
|
||
import { pid } from "process";
|
||
const validateSku1 = (rule, value, callback) => {
|
||
if (!datas.skuForm.label) {
|
||
callback(new Error(' '))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
const validateSku2 = (rule, value, callback) => {
|
||
if (!datas.skuForm.value) {
|
||
callback(new Error(' '))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
const {
|
||
searchRef,
|
||
contentRef,
|
||
addModalRef,
|
||
editModalRef,
|
||
handleQueryClick,
|
||
handleResetClick,
|
||
// handleAddClick,
|
||
// handleEditClick,
|
||
handleSubmitClick,
|
||
handleExportClick,
|
||
handleSearchClick,
|
||
handleFilterChange,
|
||
} = usePage();
|
||
// refs
|
||
const skuForm = ref(null)
|
||
const myDialogRefs = ref(null)
|
||
const forms = ref(null)
|
||
|
||
let datas = reactive({
|
||
contentForm: {
|
||
name: '',
|
||
children: [],
|
||
},
|
||
skuForm: {
|
||
label: '', value: ''
|
||
},
|
||
rules: {
|
||
name: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
},
|
||
|
||
skuRules: {
|
||
skuValidate1: {
|
||
required: true,
|
||
validator: validateSku1,
|
||
trigger: 'blur'
|
||
},
|
||
skuValidate2: {
|
||
required: true,
|
||
validator: validateSku2,
|
||
trigger: 'blur'
|
||
}
|
||
},
|
||
showSkuForm: false,
|
||
addchilderinfo: {}
|
||
})
|
||
let myDialogRef = ref(null)
|
||
function subitgood() {
|
||
skuForm.value.validate(async valid => {
|
||
if (valid) {
|
||
let res = await UserAPI.quickAdd(datas.contentForm)
|
||
if (res.code == 200) {
|
||
ElMessage.success("添加成功");
|
||
handleQueryClick();
|
||
datas.contentForm.name = ''
|
||
datas.contentForm.children = []
|
||
myDialogRef.value?.close();
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
function subitgoods() {
|
||
forms.value.validate(async valid => {
|
||
if (valid) {
|
||
let obj = {
|
||
name: datas.contentForm.name,
|
||
level: datas.addchilderinfo.level < 3 ? (datas.addchilderinfo.level + 1) : 3,
|
||
pid: datas.addchilderinfo.id
|
||
}
|
||
let res = await UserAPI.addunit(obj)
|
||
if (res.code == 200) {
|
||
ElMessage.success("添加成功");
|
||
myDialogRefs.value.close()
|
||
handleQueryClick();
|
||
datas.contentForm.name = ''
|
||
}
|
||
}
|
||
})
|
||
}
|
||
function handleClose(index: any, i: any) {
|
||
datas.contentForm.children[index].value.splice(i, 1);
|
||
}
|
||
function showInput(index: any) {
|
||
datas.contentForm.children[index].inputVisible = true;
|
||
}
|
||
function addSkuSubmit() {
|
||
skuForm.value.validate(async valid => {
|
||
if (valid) {
|
||
datas.contentForm.children.push({
|
||
name: datas.skuForm.label,
|
||
children: [{ name: datas.skuForm.value }],
|
||
inputVisible: false,
|
||
inputValue: ''
|
||
})
|
||
datas.skuForm.label = ''
|
||
datas.skuForm.value = ''
|
||
datas.showSkuForm = false
|
||
}
|
||
})
|
||
}
|
||
// 回车添加
|
||
function handleInputConfirm(index: number) {
|
||
let inputValue = datas.contentForm.children[index].inputValue;
|
||
if (inputValue) {
|
||
datas.contentForm.children[index].children.push({ name: inputValue });
|
||
}
|
||
datas.contentForm.children[index].inputVisible = false;
|
||
datas.contentForm.children[index].inputValue = '';
|
||
}
|
||
// 删除
|
||
// 删除已添加的规格
|
||
function deleteTag(index: number) {
|
||
datas.contentForm.children.splice(index, 1);
|
||
}
|
||
// 添加下一级
|
||
async function addlowerLevel(item: any) {
|
||
datas.addchilderinfo = item
|
||
myDialogRefs.value.open()
|
||
// addModalRef.value?.setModalVisible();
|
||
// addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
|
||
}
|
||
// function handleEditClicks(item: any) {
|
||
// console.log(item)
|
||
// }
|
||
function deleteClick(item: any) {
|
||
|
||
const ids = [item.id].join(",");
|
||
if (!ids) {
|
||
ElMessage.warning("请勾选删除项");
|
||
return;
|
||
}
|
||
|
||
ElMessageBox.confirm("确认删除?", "警告", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
}).then(function () {
|
||
contentConfig.deleteAction(ids).then(() => {
|
||
ElMessage.success("删除成功");
|
||
handleQueryClick();
|
||
});
|
||
|
||
});
|
||
|
||
}
|
||
// 新增
|
||
async function handleAddClick() {
|
||
myDialogRef.value?.open();
|
||
addModalRef.value?.setModalVisible();
|
||
// 加载上级规格下拉数据源
|
||
addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
|
||
// 加载角色下拉数据源
|
||
// addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||
}
|
||
// 编辑
|
||
async function handleEditClick(row: IObject) {
|
||
editModalRef.value?.handleDisabled(false);
|
||
// 加载部门下拉数据源
|
||
editModalConfig.formItems[2]!.attrs!.data = [{
|
||
createTime: "",
|
||
fullName: "顶级",
|
||
id: "0", level: 1,
|
||
name: "顶级",
|
||
pid: "0",
|
||
pids: "0,",
|
||
shopId: "1",
|
||
sort: 1,
|
||
status: 1,
|
||
updateTime: "",
|
||
children: await UserAPI.getPage({ name: "" })
|
||
}]
|
||
// 加载角色下拉数据源
|
||
// editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||
// 根据id获取数据进行填充
|
||
const data = await UserAPI.getunitinfo(row.id);
|
||
editModalRef.value?.setFormData(data);
|
||
editModalRef.value?.setModalVisible();
|
||
|
||
}
|
||
// 其他工具栏
|
||
function handleToolbarClick(name: string) {
|
||
console.log(name);
|
||
if (name === "custom1") {
|
||
ElMessage.success("点击了自定义1按钮");
|
||
}
|
||
}
|
||
// 其他操作列
|
||
async function handleOperatClick(data: IOperatData) {
|
||
console.log(data);
|
||
// 重置密码
|
||
if (data.name === "reset_pwd") {
|
||
ElMessageBox.prompt("请输入用户「" + data.row.username + "」的新密码", "重置密码", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
}).then(({ value }) => {
|
||
if (!value || value.length < 6) {
|
||
ElMessage.warning("密码至少需要6位字符，请重新输入");
|
||
return false;
|
||
}
|
||
// UserAPI.resetPassword(data.row.id, value).then(() => {
|
||
// ElMessage.success("密码重置成功，新密码是：" + value);
|
||
// });
|
||
});
|
||
} else if (data.name === "detail") {
|
||
// 禁用表单编辑
|
||
editModalRef.value?.handleDisabled(true);
|
||
// 打开抽屉
|
||
editModalRef.value?.setModalVisible();
|
||
// 修改抽屉标题
|
||
editModalConfig.drawer = { ...editModalConfig.drawer, title: "用户详情" };
|
||
// 加载部门下拉数据源
|
||
// editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
|
||
// 加载角色下拉数据源
|
||
// editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||
// 根据id获取数据进行填充
|
||
// const formData = await UserAPI.getFormData(data.row.id);
|
||
// 设置表单数据
|
||
// editModalRef.value?.setFormData(formData);
|
||
}
|
||
}
|
||
|
||
// 切换示例
|
||
const isA = ref(true);
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.tag_wrap {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
|
||
.input-new-tag {
|
||
width: 180px;
|
||
margin-left: 10px;
|
||
vertical-align: bottom;
|
||
}
|
||
</style> |