390 lines
13 KiB
Vue
390 lines
13 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 列表 -->
|
||
<template v-if="isA">
|
||
<!-- 搜索 -->
|
||
|
||
|
||
<!-- 列表 -->
|
||
<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 #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 #timemanagement="scope">
|
||
{{ scope.row.saleStartTime }}-{{ scope.row.saleEndTime }}
|
||
</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>
|
||
</page-content>
|
||
|
||
<!-- 新增 -->
|
||
<!-- <page-modal ref="addModalRef" @formDataChange="formDataChange" :modal-config="addModalConfig"
|
||
@submit-click="handleSubmitClick">
|
||
<template #gender="scope">
|
||
<Dict v-model="scope.formData[scope.prop]" code="gender" />
|
||
</template>
|
||
<template #addButton="scope">
|
||
<div>
|
||
<el-button type="primary" @click="addgoods">
|
||
<el-icon>
|
||
<Plus />
|
||
</el-icon>添加商品
|
||
</el-button>
|
||
<selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist>
|
||
</div>
|
||
</template>
|
||
<template #addmanagementtime="scope">
|
||
<template v-if="scope.formData.useTime == 1">
|
||
<el-time-picker value-format="HH:mm:ss" v-model="scope.formData.saleTime" is-range range-separator="到"
|
||
start-placeholder="开始时间" end-placeholder="结束时间" />
|
||
</template>
|
||
</template>
|
||
</page-modal> -->
|
||
|
||
<!-- 编辑 -->
|
||
<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>
|
||
<template #addButton="scope">
|
||
<div>
|
||
<el-button type="primary" @click="addgoods">
|
||
<el-icon>
|
||
<Plus />
|
||
</el-icon>添加商品
|
||
</el-button>
|
||
<!-- 选责商品列表 -->
|
||
<selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist>
|
||
</div>
|
||
</template>
|
||
<template #addmanagementtime="scope">
|
||
<template v-if="scope.formData.useTime == 1">
|
||
{{ scope.formData }}
|
||
<el-time-picker value-format="HH:mm:ss" v-model="scope.formData.saleTime" is-range range-separator="到"
|
||
start-placeholder="开始时间" end-placeholder="结束时间" />
|
||
</template>
|
||
</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>
|
||
<!-- 新增添加商品 -->
|
||
<myDialog title="选择商品" width="50%" ref="myDialogRef" @Confirm="subitgood">
|
||
<page-search ref="searchRefs" :search-config="searchConfig2" @query-click="searchs"
|
||
@reset-click="handleResetClick" />
|
||
<page-content ref="contentRefs" v-if="switchref" :content-config="contentConfig2" @add-click="handleAddClick"
|
||
@edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
|
||
@toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
|
||
<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 #timemanagement="scope">
|
||
{{ scope.row.startTime }}-{{ scope.row.endTime }}
|
||
</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>
|
||
</page-content>
|
||
|
||
|
||
|
||
|
||
<!-- <el-table :data="selectData" border style="width: 100%">
|
||
<el-table-column prop="date" align="center" label="Date" />
|
||
<el-table-column prop="address" align="center" label="Address" />
|
||
</el-table> -->
|
||
</myDialog>
|
||
<!-- 新增 -->
|
||
<myDialog :title="title" width="30%" ref="myDialogRefAdd" @Confirm="addConfirm()">
|
||
<el-form :model="forms" label-width="120px" ref="elFormref" :rules="rules">
|
||
<el-form-item label="分组名称" prop="name">
|
||
<el-input v-model="forms.name" />
|
||
</el-form-item>
|
||
<el-form-item label="选择商品">
|
||
<el-button type="primary" icon="Plus" @click="addgoods">添加商品</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="" v-if="selectData.length">
|
||
<!-- 选责商品列表 -->
|
||
<selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist>
|
||
</el-form-item>
|
||
<el-form-item label="分组状态">
|
||
<el-radio-group v-model="forms.status">
|
||
<el-radio :value="1" label="启用" />
|
||
<el-radio :value="0" label="禁用" />
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="售卖时间管控">
|
||
<el-radio-group v-model="forms.useTime">
|
||
<el-radio :value="1" label="启用" />
|
||
<el-radio :value="0" label="禁用" />
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="时间选择" v-if="forms.useTime == 1">
|
||
<el-time-picker value-format="HH:mm:ss" v-model="forms.time" is-range range-separator="到"
|
||
start-placeholder="开始时间" end-placeholder="结束时间" />
|
||
</el-form-item>
|
||
<el-form-item label="排列方式">
|
||
<el-radio-group v-model="forms.sortMode">
|
||
<el-radio value="0" label="默认" />
|
||
<el-radio value="1" label="价格由高到低" />
|
||
<el-radio value="2" label="价格由低到高" />
|
||
<el-radio value="3" label="销量由高到低" />
|
||
<el-radio value="4" label="销量由低到高" />
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="分组排序">
|
||
<el-input-number v-model="forms.sort" controls-position="right" />
|
||
</el-form-item>
|
||
</el-form>
|
||
</myDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import UserAPI from "@/api/onlineShop/goodsGroupconfig";
|
||
import type { FormInstance, FormRules } from "element-plus";
|
||
|
||
import type { IObject, IOperatData } from "@/components/CURD/types";
|
||
import usePage from "@/components/CURD/usePage";
|
||
import addModalConfig from "./goodsGroupconfig/add";
|
||
import contentConfig from "./goodsGroupconfig/content";
|
||
import contentConfig2 from "./goodsGroupconfig/content2";
|
||
import editModalConfig from "./goodsGroupconfig/edit";
|
||
import searchConfig from "./goodsGroupconfig/search";
|
||
import searchConfig2 from "./goodsGroupconfig/search2";
|
||
import myDialog from '@/components/mycomponents/myDialog.vue'
|
||
import selectGoodslist from "./goodsGroupconfig/selectGoodslist.vue"
|
||
const {
|
||
searchRef,
|
||
searchRefs,
|
||
contentRef,
|
||
contentRefs,
|
||
addModalRef,
|
||
editModalRef,
|
||
handleQueryClick,
|
||
searchs,
|
||
handleResetClick,
|
||
// handleAddClick,
|
||
// handleEditClick,
|
||
handleSubmitClick,
|
||
handleExportClick,
|
||
handleSearchClick,
|
||
handleFilterChange,
|
||
} = usePage();
|
||
|
||
let switchref = ref(false)
|
||
|
||
// 新增
|
||
async function handleAddClick() {
|
||
addModalRef.value?.setModalVisible();
|
||
selectData.value = []
|
||
// 加载上级规格下拉数据源
|
||
// addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
|
||
// 加载角色下拉数据源
|
||
// addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||
}
|
||
const myDialogRef = ref(null)
|
||
const myDialogRefAdd = ref(null)
|
||
const elFormref = ref(null)
|
||
let title = ref("新增分组")
|
||
// 选中的商品数据
|
||
let selectData = ref([])
|
||
let forms = reactive({
|
||
name: "",
|
||
status: 1,
|
||
useTime: 0,
|
||
sortMode: '0',
|
||
sort: 1,
|
||
time: ""
|
||
})
|
||
|
||
// 添加商品
|
||
function addgoods() {
|
||
// console.log(selectData.value, '编辑时候有的数据')
|
||
switchref.value = true
|
||
myDialogRef.value.open()
|
||
|
||
}
|
||
const rules = reactive<FormRules<RuleForm>>({
|
||
name: [
|
||
{ required: true, message: '请输入分组名称', trigger: 'blur' },
|
||
],
|
||
})
|
||
interface RuleForm {
|
||
name: string
|
||
}
|
||
|
||
// 添加编辑商品分组
|
||
async function addConfirm() {
|
||
await nextTick();
|
||
elFormref.value.validate(async (valid, fields) => {
|
||
if (valid) {
|
||
let obj = {
|
||
...forms,
|
||
selectgoods: selectData.value
|
||
}
|
||
// 商品选择的合集
|
||
if (selectData.value.length) {
|
||
let arr = []
|
||
selectData.value.forEach((item, index) => {
|
||
arr.push(item.id)
|
||
})
|
||
obj.productIds = arr
|
||
}
|
||
console.log(obj, '商品分组的参数')
|
||
if (obj.time && obj.time.length) {
|
||
obj.saleStartTime = obj.time[0]
|
||
obj.saleEndTime = obj.time[1]
|
||
}
|
||
if (title.value == "新增分组") {
|
||
let res = await UserAPI.addunit(obj)
|
||
if (res.code == 200) {
|
||
ElMessage.success("添加成功");
|
||
myDialogRefAdd.value.close()
|
||
}
|
||
} else {
|
||
if (obj.useTime == 0) {
|
||
obj.saleStartTime = null
|
||
obj.saleEndTime = null
|
||
}
|
||
let res = await UserAPI.update(obj)
|
||
if (res.code == 200) {
|
||
ElMessage.success("编辑成功");
|
||
myDialogRefAdd.value.close()
|
||
}
|
||
}
|
||
// contentConfig.indexAction()
|
||
handleQueryClick()
|
||
} else {
|
||
console.log('error submit!', fields)
|
||
}
|
||
})
|
||
|
||
|
||
|
||
}
|
||
// 添加商品的回调
|
||
function subitgood() {
|
||
|
||
if (title.value == "编辑分组") {
|
||
let arr = selectData.value
|
||
contentRefs.value.getselectTable().forEach((item: any) => {
|
||
let selectdata = selectData.value.find(ele => ele.id == item.id)
|
||
if (!selectdata) {
|
||
arr.push(item)
|
||
}
|
||
})
|
||
selectData.value = arr
|
||
} else {
|
||
selectData.value = contentRefs.value.getselectTable()
|
||
}
|
||
switchref.value = false
|
||
myDialogRef.value.close()
|
||
}
|
||
// 删除商品
|
||
function deleteItem(data: any) {
|
||
selectData.value = data
|
||
}
|
||
|
||
|
||
// 编辑
|
||
async function handleEditClick(row: IObject) {
|
||
editModalRef.value?.handleDisabled(false);
|
||
title.value = "编辑分组"
|
||
// 加载部门下拉数据源
|
||
// editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
|
||
// editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
|
||
// 加载角色下拉数据源
|
||
// editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
|
||
// 根据id获取数据进行填充
|
||
const data = await UserAPI.getunitinfo(row.id);
|
||
let obj = { ...data }
|
||
selectData.value = data.productList
|
||
obj.time = [obj.saleStartTime, obj.saleEndTime]
|
||
for (let key in obj) {
|
||
forms[key] = obj[key]
|
||
}
|
||
myDialogRefAdd.value.open()
|
||
// editModalRef.value?.setFormData(obj);
|
||
// editModalRef.value?.setModalVisible();
|
||
}
|
||
// 其他工具栏
|
||
function handleToolbarClick(name: string) {
|
||
console.log(name);
|
||
if (name === "custom1") {
|
||
forms = reactive({
|
||
name: "",
|
||
status: 1,
|
||
useTime: 0,
|
||
sortMode: '0',
|
||
sort: 1,
|
||
time: ""
|
||
})
|
||
selectData.value = []
|
||
title.value = "新增分组"
|
||
|
||
// 新增
|
||
myDialogRefAdd.value.open()
|
||
}
|
||
}
|
||
// 其他操作列
|
||
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>
|