移除demo
This commit is contained in:
parent
3dee145386
commit
c75443a56f
@ -1,398 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch" label-width="68px">
|
|
||||||
<el-form-item label="客户姓名" prop="customerName">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.customerName"
|
|
||||||
placeholder="请输入客户姓名"
|
|
||||||
clearable
|
|
||||||
@keyup.enter.native="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="手机号码" prop="phonenumber">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.phonenumber"
|
|
||||||
placeholder="请输入手机号码"
|
|
||||||
clearable
|
|
||||||
@keyup.enter.native="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="客户性别" prop="sex">
|
|
||||||
<el-select v-model="queryParams.sex" placeholder="请选择客户性别" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_user_gender"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="客户生日" prop="birthday">
|
|
||||||
<el-date-picker clearable
|
|
||||||
v-model="queryParams.birthday"
|
|
||||||
type="date"
|
|
||||||
format="YYYY-MM-DD"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
placeholder="请选择客户生日">
|
|
||||||
</el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
||||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
icon="Plus"
|
|
||||||
@click="handleAdd"
|
|
||||||
v-hasPermi="['demo:customer:add']"
|
|
||||||
>新增</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="success"
|
|
||||||
plain
|
|
||||||
icon="Edit"
|
|
||||||
:disabled="single"
|
|
||||||
@click="handleUpdate"
|
|
||||||
v-hasPermi="['demo:customer:edit']"
|
|
||||||
>修改</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="danger"
|
|
||||||
plain
|
|
||||||
icon="Delete"
|
|
||||||
:disabled="multiple"
|
|
||||||
@click="handleDelete"
|
|
||||||
v-hasPermi="['demo:customer:remove']"
|
|
||||||
>删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="warning"
|
|
||||||
plain
|
|
||||||
icon="Download"
|
|
||||||
@click="handleExport"
|
|
||||||
v-hasPermi="['demo:customer:export']"
|
|
||||||
>导出</el-button>
|
|
||||||
</el-col>
|
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
|
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
|
||||||
<el-table-column label="客户id" align="center" prop="customerId" />
|
|
||||||
<el-table-column label="客户姓名" align="center" prop="customerName" />
|
|
||||||
<el-table-column label="手机号码" align="center" prop="phonenumber" />
|
|
||||||
<el-table-column label="客户性别" align="center" prop="sex">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :options="sys_user_gender" :value="scope.row.sex"/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="客户生日" align="center" prop="birthday" width="180">
|
|
||||||
<template #default="scope">
|
|
||||||
<span>{{ parseTime(scope.row.birthday, '{y}-{m}-{d}') }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="客户描述" align="center" prop="remark" />
|
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
type="text"
|
|
||||||
icon="Edit"
|
|
||||||
@click="handleUpdate(scope.row)"
|
|
||||||
v-hasPermi="['demo:customer:edit']"
|
|
||||||
>修改</el-button>
|
|
||||||
<el-button
|
|
||||||
type="text"
|
|
||||||
icon="Delete"
|
|
||||||
@click="handleDelete(scope.row)"
|
|
||||||
v-hasPermi="['demo:customer:remove']"
|
|
||||||
>删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<pagination
|
|
||||||
v-show="total>0"
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNum"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 添加或修改客户主表(mb)对话框 -->
|
|
||||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
|
||||||
<el-form ref="customerRef" :model="form" :rules="rules" label-width="80px">
|
|
||||||
<el-form-item label="客户姓名" prop="customerName">
|
|
||||||
<el-input v-model="form.customerName" placeholder="请输入客户姓名" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="手机号码" prop="phonenumber">
|
|
||||||
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="客户性别" prop="sex">
|
|
||||||
<el-select v-model="form.sex" placeholder="请选择客户性别">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_user_gender"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="客户生日" prop="birthday">
|
|
||||||
<el-date-picker clearable
|
|
||||||
v-model="form.birthday"
|
|
||||||
type="date"
|
|
||||||
format="YYYY-MM-DD"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
placeholder="请选择客户生日">
|
|
||||||
</el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="客户描述" prop="remark">
|
|
||||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-divider content-position="center">商品子信息</el-divider>
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button type="primary" icon="Plus" @click="handleAddDemoGoods">添加</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button type="danger" icon="Delete" @click="handleDeleteDemoGoods">删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-table :data="demoGoodsList" :row-class-name="rowDemoGoodsIndex" @selection-change="handleDemoGoodsSelectionChange" ref="demoGoods">
|
|
||||||
<el-table-column type="selection" width="50" align="center" />
|
|
||||||
<el-table-column label="序号" align="center" prop="index" width="50"/>
|
|
||||||
<el-table-column label="商品名称" prop="name" width="150">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-input v-model="scope.row.name" placeholder="请输入商品名称" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品重量" prop="weight" width="150">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-input v-model="scope.row.weight" placeholder="请输入商品重量" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品价格" prop="price" width="150">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-input v-model="scope.row.price" placeholder="请输入商品价格" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品时间" prop="date" width="240">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-date-picker clearable v-model="scope.row.date" type="date" value-format="YYYY-MM-DD" placeholder="请选择商品时间" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品种类" prop="type" width="150">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-select v-model="scope.row.type" placeholder="请选择商品种类">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_goods_type"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
||||||
<el-button @click="cancel">取 消</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/demo/customer";
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const {sys_goods_type, sys_user_gender } = proxy.useDict('sys_goods_type', 'sys_user_gender');
|
|
||||||
|
|
||||||
// 遮罩层
|
|
||||||
const loading = ref(true);
|
|
||||||
// 选中数组
|
|
||||||
const ids = ref([]);
|
|
||||||
// 子表选中数据
|
|
||||||
const checkedDemoGoods= ref([])
|
|
||||||
// 非单个禁用
|
|
||||||
const single = ref(true);
|
|
||||||
// 非多个禁用
|
|
||||||
const multiple = ref(true);
|
|
||||||
// 总条数
|
|
||||||
const total = ref(0);
|
|
||||||
// 是否显示弹出层
|
|
||||||
const open = ref(false);
|
|
||||||
// 弹出层标题
|
|
||||||
const title = ref("");
|
|
||||||
// 显示搜索条件
|
|
||||||
const showSearch = ref(true);
|
|
||||||
// 客户主表(mb)表格数据
|
|
||||||
const customerList = ref([]);
|
|
||||||
// 商品子表格数据
|
|
||||||
const demoGoodsList = ref([]);
|
|
||||||
|
|
||||||
const data = reactive({
|
|
||||||
// 表单参数
|
|
||||||
form: {},
|
|
||||||
// 查询参数
|
|
||||||
queryParams: {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
customerName: undefined,
|
|
||||||
phonenumber: undefined,
|
|
||||||
sex: undefined,
|
|
||||||
birthday: undefined
|
|
||||||
},
|
|
||||||
// 表单校验
|
|
||||||
rules: {
|
|
||||||
customerName: [{ required: true, message: "客户姓名不能为空", trigger: "blur" }],
|
|
||||||
phonenumber: [{required: true, message: "手机号码不能为空", trigger: "blur" }],
|
|
||||||
sex: [{ required: true, message: "性别不能为空", trigger: "change" }],
|
|
||||||
birthday: [{ required: true, message: "生日不能为空", trigger: "blur" }]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const { form, queryParams, rules } = toRefs(data);
|
|
||||||
|
|
||||||
/** 查询客户主表(mb)列表 */
|
|
||||||
function getList() {
|
|
||||||
loading.value = true;
|
|
||||||
listCustomer(queryParams.value).then(response => {
|
|
||||||
customerList.value = response.rows;
|
|
||||||
total.value = response.total;
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 取消按钮
|
|
||||||
function cancel() {
|
|
||||||
open.value = false;
|
|
||||||
reset();
|
|
||||||
}
|
|
||||||
// 表单重置
|
|
||||||
function reset() {
|
|
||||||
form.value = {
|
|
||||||
customerId: undefined,
|
|
||||||
customerName: undefined,
|
|
||||||
phonenumber: undefined,
|
|
||||||
sex: undefined,
|
|
||||||
birthday: undefined,
|
|
||||||
remark: undefined
|
|
||||||
};
|
|
||||||
demoGoodsList.value = [];
|
|
||||||
proxy.resetForm("customerRef");
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
function handleQuery() {
|
|
||||||
queryParams.value.pageNum = 1;
|
|
||||||
getList();
|
|
||||||
}
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
function resetQuery() {
|
|
||||||
proxy.resetForm("queryFormRef");
|
|
||||||
handleQuery();
|
|
||||||
}
|
|
||||||
// 多选框选中数据
|
|
||||||
function handleSelectionChange(selection) {
|
|
||||||
ids.value = selection.map(item => item.customerId)
|
|
||||||
single.value = selection.length!==1
|
|
||||||
multiple.value = !selection.length
|
|
||||||
}
|
|
||||||
/** 新增按钮操作 */
|
|
||||||
function handleAdd() {
|
|
||||||
reset();
|
|
||||||
open.value = true;
|
|
||||||
title.value = "添加客户主表(mb)";
|
|
||||||
}
|
|
||||||
/** 修改按钮操作 */
|
|
||||||
function handleUpdate(row) {
|
|
||||||
reset();
|
|
||||||
const customerId = row.customerId || ids.value
|
|
||||||
getCustomer(customerId).then(response => {
|
|
||||||
form.value = response.data;
|
|
||||||
demoGoodsList.value = response.data.demoGoodsList;
|
|
||||||
open.value = true;
|
|
||||||
title.value = "修改客户主表(mb)";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
function handleDelete(row) {
|
|
||||||
const customerIds = row.customerId || ids.value;
|
|
||||||
proxy.$modal.confirm('是否确认删除客户主表(mb)编号为"' + customerIds + '"的数据项？').then(function() {
|
|
||||||
return delCustomer(customerIds);
|
|
||||||
}).then(() => {
|
|
||||||
getList();
|
|
||||||
proxy.$modal.msgSuccess("删除成功");
|
|
||||||
}).catch(() => {});
|
|
||||||
}
|
|
||||||
/** 提交按钮 */
|
|
||||||
function submitForm() {
|
|
||||||
proxy.$refs["customerRef"].validate(valid => {
|
|
||||||
if (valid) {
|
|
||||||
form.value.demoGoodsList = demoGoodsList;
|
|
||||||
if (form.value.customerId != null) {
|
|
||||||
updateCustomer(form.value).then(response => {
|
|
||||||
proxy.$modal.msgSuccess("修改成功");
|
|
||||||
open.value = false;
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
addCustomer(form.value).then(response => {
|
|
||||||
proxy.$modal.msgSuccess("新增成功");
|
|
||||||
open.value = false;
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
/** 商品子序号 */
|
|
||||||
function rowDemoGoodsIndex({ row, rowIndex }) {
|
|
||||||
row.index = rowIndex + 1;
|
|
||||||
}
|
|
||||||
/** 商品子添加按钮操作 */
|
|
||||||
function handleAddDemoGoods() {
|
|
||||||
let obj = {};
|
|
||||||
obj.name = "";
|
|
||||||
obj.weight = 1;
|
|
||||||
obj.price = 0.0;
|
|
||||||
obj.date = "";
|
|
||||||
obj.type = "";
|
|
||||||
demoGoodsList.value.push(obj);
|
|
||||||
}
|
|
||||||
/** 商品子删除按钮操作 */
|
|
||||||
function handleDeleteDemoGoods() {
|
|
||||||
if (checkedDemoGoods.value.length == 0) {
|
|
||||||
proxy.$modal.msgError("请先选择要删除的商品子数据");
|
|
||||||
} else {
|
|
||||||
const goodsList = demoGoodsList.value;
|
|
||||||
const checkedGoods = checkedDemoGoods.value;
|
|
||||||
demoGoodsList.value = goodsList.filter(function(item) {
|
|
||||||
return checkedGoods.indexOf(item.index) == -1
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/** 复选框选中数据 */
|
|
||||||
function handleDemoGoodsSelectionChange(selection) {
|
|
||||||
checkedDemoGoods.value = selection.map(item => item.index)
|
|
||||||
}
|
|
||||||
/** 导出按钮操作 */
|
|
||||||
function handleExport() {
|
|
||||||
proxy.download('demo/customer/export', {
|
|
||||||
...queryParams.value
|
|
||||||
}, `customer_${new Date().getTime()}.xlsx`)
|
|
||||||
}
|
|
||||||
|
|
||||||
getList();
|
|
||||||
|
|
||||||
</script>
|
|
||||||
@ -1,257 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
|
||||||
<el-form-item label="产品名称" prop="productName">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.productName"
|
|
||||||
placeholder="请输入产品名称"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="产品状态" prop="status">
|
|
||||||
<el-select v-model="queryParams.status" placeholder="请选择产品状态" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_common_status"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
||||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
icon="Plus"
|
|
||||||
@click="handleAdd"
|
|
||||||
v-hasPermi="['demo:product:add']"
|
|
||||||
>新增</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="info"
|
|
||||||
plain
|
|
||||||
icon="Sort"
|
|
||||||
@click="toggleExpandAll"
|
|
||||||
>展开/折叠</el-button>
|
|
||||||
</el-col>
|
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-table
|
|
||||||
v-if="refreshTable"
|
|
||||||
v-loading="loading"
|
|
||||||
:data="productList"
|
|
||||||
row-key="productId"
|
|
||||||
:default-expand-all="isExpandAll"
|
|
||||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
||||||
>
|
|
||||||
<el-table-column label="产品名称" align="center" prop="productName" />
|
|
||||||
<el-table-column label="产品状态" align="center" prop="status">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :options="sys_common_status" :value="scope.row.status"/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['demo:product:edit']">修改</el-button>
|
|
||||||
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['demo:product:add']">新增</el-button>
|
|
||||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['demo:product:remove']">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<!-- 添加或修改产品树表（mb）对话框 -->
|
|
||||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
|
||||||
<el-form ref="productRef" :model="form" :rules="rules" label-width="80px">
|
|
||||||
<el-form-item label="父产品id" prop="parentId">
|
|
||||||
<el-tree-select
|
|
||||||
v-model="form.parentId"
|
|
||||||
:data="productOptions"
|
|
||||||
:props="{ value: 'productId', label: 'productName', children: 'children' }"
|
|
||||||
value-key="productId"
|
|
||||||
placeholder="请选择父产品id"
|
|
||||||
check-strictly
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="产品名称" prop="productName">
|
|
||||||
<el-input v-model="form.productName" placeholder="请输入产品名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="显示顺序" prop="orderNum">
|
|
||||||
<el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="产品状态" prop="status">
|
|
||||||
<el-select v-model="form.status" placeholder="请选择产品状态">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_common_status"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
||||||
<el-button @click="cancel">取 消</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup name="Product">
|
|
||||||
import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/demo/product";
|
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { sys_common_status } = proxy.useDict('sys_common_status');
|
|
||||||
|
|
||||||
// 树表表格数据
|
|
||||||
const productList = ref([]);
|
|
||||||
// 树选项
|
|
||||||
const productOptions = ref([]);
|
|
||||||
// 是否显示弹出层
|
|
||||||
const open = ref(false);
|
|
||||||
// 遮罩层
|
|
||||||
const loading = ref(true);
|
|
||||||
// 显示搜索条件
|
|
||||||
const showSearch = ref(true);
|
|
||||||
// 弹出层标题
|
|
||||||
const title = ref("");
|
|
||||||
// 是否展开，默认全部展开
|
|
||||||
const isExpandAll = ref(true);
|
|
||||||
// 重新渲染表格状态
|
|
||||||
const refreshTable = ref(true);
|
|
||||||
|
|
||||||
const data = reactive({
|
|
||||||
form: {},
|
|
||||||
queryParams: {
|
|
||||||
productName: null,
|
|
||||||
status: null
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const { queryParams, form, rules } = toRefs(data);
|
|
||||||
|
|
||||||
/** 查询产品树表（mb）列表 */
|
|
||||||
function getList() {
|
|
||||||
loading.value = true;
|
|
||||||
listProduct(queryParams.value).then(response => {
|
|
||||||
productList.value = proxy.handleTree(response.data, "productId", "parentId");
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 取消按钮
|
|
||||||
function cancel() {
|
|
||||||
open.value = false;
|
|
||||||
reset();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 表单重置
|
|
||||||
function reset() {
|
|
||||||
form.value = {
|
|
||||||
productId: null,
|
|
||||||
parentId: null,
|
|
||||||
productName: null,
|
|
||||||
orderNum: null,
|
|
||||||
status: null
|
|
||||||
};
|
|
||||||
proxy.resetForm("productRef");
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
function handleQuery() {
|
|
||||||
getList();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
function resetQuery() {
|
|
||||||
proxy.resetForm("queryRef");
|
|
||||||
handleQuery();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 新增按钮操作 */
|
|
||||||
async function handleAdd(row) {
|
|
||||||
reset();
|
|
||||||
await listProduct().then(response => {
|
|
||||||
productOptions.value = proxy.handleTree(response.data, "productId");
|
|
||||||
});
|
|
||||||
if (row != null && row.productId) {
|
|
||||||
form.value.parentId = row.productId;
|
|
||||||
} else {
|
|
||||||
form.value.parentId = 0;
|
|
||||||
}
|
|
||||||
open.value = true;
|
|
||||||
title.value = "添加产品树表（mb）";
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 展开/折叠操作 */
|
|
||||||
function toggleExpandAll() {
|
|
||||||
refreshTable.value = false;
|
|
||||||
isExpandAll.value = !isExpandAll.value;
|
|
||||||
nextTick(() => {
|
|
||||||
refreshTable.value = true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 修改按钮操作 */
|
|
||||||
async function handleUpdate(row) {
|
|
||||||
reset();
|
|
||||||
await listProduct().then(response => {
|
|
||||||
productOptions.value = proxy.handleTree(response.data, "productId");
|
|
||||||
});
|
|
||||||
if (row != null) {
|
|
||||||
form.value.parentId = row.productId;
|
|
||||||
}
|
|
||||||
getProduct(row.productId).then(response => {
|
|
||||||
form.value = response.data;
|
|
||||||
open.value = true;
|
|
||||||
title.value = "修改产品树表（mb）";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 提交按钮 */
|
|
||||||
function submitForm() {
|
|
||||||
proxy.$refs["productRef"].validate(valid => {
|
|
||||||
if (valid) {
|
|
||||||
if (form.value.productId != null) {
|
|
||||||
updateProduct(form.value).then(response => {
|
|
||||||
proxy.$modal.msgSuccess("修改成功");
|
|
||||||
open.value = false;
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
addProduct(form.value).then(response => {
|
|
||||||
proxy.$modal.msgSuccess("新增成功");
|
|
||||||
open.value = false;
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
function handleDelete(row) {
|
|
||||||
proxy.$modal.confirm('是否确认删除产品树表（mb）编号为"' + row.productId + '"的数据项？').then(function() {
|
|
||||||
return delProduct(row.productId);
|
|
||||||
}).then(() => {
|
|
||||||
getList();
|
|
||||||
proxy.$modal.msgSuccess("删除成功");
|
|
||||||
}).catch(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
getList();
|
|
||||||
</script>
|
|
||||||
@ -1,328 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
|
||||||
<el-form-item label="学生名称" prop="studentName">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.studentName"
|
|
||||||
placeholder="请输入学生名称"
|
|
||||||
clearable
|
|
||||||
@keyup.enter.native="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="年龄" prop="studentAge">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.studentAge"
|
|
||||||
placeholder="请输入年龄"
|
|
||||||
clearable
|
|
||||||
@keyup.enter.native="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
||||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
icon="Plus"
|
|
||||||
@click="handleAdd"
|
|
||||||
v-hasPermi="['demo:student:add']"
|
|
||||||
>新增</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="success"
|
|
||||||
plain
|
|
||||||
icon="Edit"
|
|
||||||
:disabled="single"
|
|
||||||
@click="handleUpdate"
|
|
||||||
v-hasPermi="['demo:student:edit']"
|
|
||||||
>修改</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="danger"
|
|
||||||
plain
|
|
||||||
icon="Delete"
|
|
||||||
:disabled="multiple"
|
|
||||||
@click="handleDelete"
|
|
||||||
v-hasPermi="['demo:student:remove']"
|
|
||||||
>删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="warning"
|
|
||||||
plain
|
|
||||||
icon="Download"
|
|
||||||
@click="handleExport"
|
|
||||||
v-hasPermi="['demo:student:export']"
|
|
||||||
>导出</el-button>
|
|
||||||
</el-col>
|
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-table v-loading="loading" :data="studentList" @selection-change="handleSelectionChange">
|
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
|
||||||
<el-table-column label="编号" align="center" prop="studentId" />
|
|
||||||
<el-table-column label="学生名称" align="center" prop="studentName" />
|
|
||||||
<el-table-column label="年龄" align="center" prop="studentAge" />
|
|
||||||
<el-table-column label="爱好" align="center" prop="studentHobby">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :options="sys_student_hobby" :value="scope.row.studentHobby"/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="性别" align="center" prop="studentSex">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :options="sys_user_gender" :value="scope.row.studentSex"/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="状态" align="center" prop="studentStatus">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :options="sys_student_status" :value="scope.row.studentStatus" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="生日" align="center" prop="studentBirthday" width="180">
|
|
||||||
<template #default="scope">
|
|
||||||
<span>{{ parseTime(scope.row.studentBirthday, '{y}-{m}-{d}') }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
type="text"
|
|
||||||
icon="Edit"
|
|
||||||
@click="handleUpdate(scope.row)"
|
|
||||||
v-hasPermi="['demo:student:edit']"
|
|
||||||
>修改</el-button>
|
|
||||||
<el-button
|
|
||||||
type="text"
|
|
||||||
icon="Delete"
|
|
||||||
@click="handleDelete(scope.row)"
|
|
||||||
v-hasPermi="['demo:student:remove']"
|
|
||||||
>删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<pagination
|
|
||||||
v-show="total>0"
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNum"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 添加或修改学生信息单表(mb)对话框 -->
|
|
||||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
|
||||||
<el-form ref="studentRef" :model="form" :rules="rules" label-width="80px">
|
|
||||||
<el-form-item label="学生名称" prop="studentName">
|
|
||||||
<el-input v-model="form.studentName" placeholder="请输入学生名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="年龄" prop="studentAge">
|
|
||||||
<el-input v-model="form.studentAge" placeholder="请输入年龄" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="爱好" prop="studentHobby">
|
|
||||||
<el-select v-model="form.studentHobby" placeholder="请选择爱好">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_student_hobby"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="性别" prop="studentSex">
|
|
||||||
<el-select v-model="form.studentSex" placeholder="请选择性别">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_user_gender"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="studentStatus">
|
|
||||||
<el-radio-group v-model="form.studentStatus">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in sys_student_status"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.value"
|
|
||||||
>{{dict.label}}</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="生日" prop="studentBirthday">
|
|
||||||
<el-date-picker clearable
|
|
||||||
v-model="form.studentBirthday"
|
|
||||||
type="date"
|
|
||||||
format="YYYY-MM-DD"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
placeholder="请选择生日">
|
|
||||||
</el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
||||||
<el-button @click="cancel">取 消</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { listStudent, getStudent, delStudent, addStudent, updateStudent } from "@/api/demo/student";
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { sys_student_hobby, sys_user_gender, sys_student_status } = proxy.useDict("sys_student_hobby", "sys_user_gender","sys_student_status");
|
|
||||||
|
|
||||||
|
|
||||||
// 是否显示弹出层
|
|
||||||
const open = ref(false);
|
|
||||||
// 遮罩层
|
|
||||||
const loading = ref(true);
|
|
||||||
// 显示搜索条件
|
|
||||||
const showSearch = ref(true);
|
|
||||||
// 选中数组
|
|
||||||
const ids = ref([]);
|
|
||||||
// 非单个禁用
|
|
||||||
const single = ref(true);
|
|
||||||
// 非多个禁用
|
|
||||||
const multiple = ref(true);
|
|
||||||
// 总条数
|
|
||||||
const total = ref(0);
|
|
||||||
// 弹出层标题
|
|
||||||
const title = ref("");
|
|
||||||
// 学生信息单表(mb)表格数据
|
|
||||||
const studentList = ref([]);
|
|
||||||
|
|
||||||
const data = reactive({
|
|
||||||
// 表单参数
|
|
||||||
form: {},
|
|
||||||
// 查询参数
|
|
||||||
queryParams: {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
studentName: undefined,
|
|
||||||
studentAge: undefined
|
|
||||||
},
|
|
||||||
// 表单校验
|
|
||||||
rules: {
|
|
||||||
studentName: [{ required: true, message: "学生名称不能为空", trigger: "blur" }],
|
|
||||||
studentAge: [{required: true, message: "年龄不能为空", trigger: "blur" }],
|
|
||||||
studentHobby: [{ required: true, message: "爱好不能为空", trigger: "change" }],
|
|
||||||
studentSex: [{ required: true, message: "性别不能为空", trigger: "change" }],
|
|
||||||
studentStatus: [{ required: true, message: "状态不能为空", trigger: "change" }],
|
|
||||||
studentBirthday: [{ required: true, message: "生日不能为空", trigger: "blur" }]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const { queryParams, form, rules } = toRefs(data);
|
|
||||||
|
|
||||||
/** 查询学生信息单表(mb)列表 */
|
|
||||||
function getList() {
|
|
||||||
loading.value = true;
|
|
||||||
listStudent(queryParams.value).then(response => {
|
|
||||||
studentList.value = response.rows;
|
|
||||||
total.value = response.total;
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 取消按钮 */
|
|
||||||
function cancel() {
|
|
||||||
open.value = false;
|
|
||||||
reset();
|
|
||||||
}
|
|
||||||
/** 表单重置 */
|
|
||||||
function reset() {
|
|
||||||
form.value = {
|
|
||||||
studentId: undefined,
|
|
||||||
studentName: undefined,
|
|
||||||
studentAge: undefined,
|
|
||||||
studentHobby: undefined,
|
|
||||||
studentSex: undefined,
|
|
||||||
studentStatus: undefined,
|
|
||||||
studentBirthday: undefined
|
|
||||||
};
|
|
||||||
proxy.resetForm("studentRef");
|
|
||||||
}
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
function handleQuery() {
|
|
||||||
queryParams.value.pageNum = 1;
|
|
||||||
getList();
|
|
||||||
}
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
function resetQuery() {
|
|
||||||
proxy.resetForm("queryRef");
|
|
||||||
handleQuery();
|
|
||||||
}
|
|
||||||
/** 多选框选中数据 */
|
|
||||||
function handleSelectionChange(selection) {
|
|
||||||
ids.value = selection.map(item => item.studentId);
|
|
||||||
single.value = selection.length != 1;
|
|
||||||
multiple.value = !selection.length;
|
|
||||||
}
|
|
||||||
/** 新增按钮操作 */
|
|
||||||
function handleAdd() {
|
|
||||||
reset();
|
|
||||||
open.value = true;
|
|
||||||
title.value = "添加学生信息单表(mb)";
|
|
||||||
}
|
|
||||||
/** 修改按钮操作 */
|
|
||||||
function handleUpdate(row) {
|
|
||||||
reset();
|
|
||||||
const studentId = row.studentId || ids.value;
|
|
||||||
getStudent(studentId).then(response => {
|
|
||||||
form.value = response.data;
|
|
||||||
open.value = true;
|
|
||||||
title.value = "修改学生信息单表(mb)";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 提交按钮 */
|
|
||||||
function submitForm() {
|
|
||||||
proxy.$refs["studentRef"].validate(valid => {
|
|
||||||
if (valid) {
|
|
||||||
if (form.value.studentId != null) {
|
|
||||||
updateStudent(form.value).then(response => {
|
|
||||||
proxy.$modal.msgSuccess("修改成功");
|
|
||||||
open.value = false;
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
addStudent(form.value).then(response => {
|
|
||||||
proxy.$modal.msgSuccess("新增成功");
|
|
||||||
open.value = false;
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
function handleDelete(row) {
|
|
||||||
const studentIds = row.studentId || ids.value;
|
|
||||||
proxy.$modal.confirm('是否确认删除学生信息单表(mb)编号为"' + studentIds + '"的数据项？').then(function() {
|
|
||||||
return delStudent(studentIds);
|
|
||||||
}).then(() => {
|
|
||||||
getList();
|
|
||||||
proxy.$modal.msgSuccess("删除成功");
|
|
||||||
}).catch(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 导出按钮操作 */
|
|
||||||
function handleExport() {
|
|
||||||
proxy.download('demo/student/export', {
|
|
||||||
...queryParams.value
|
|
||||||
}, `student_${new Date().getTime()}.xlsx`)
|
|
||||||
}
|
|
||||||
|
|
||||||
getList();
|
|
||||||
</script>
|
|
||||||
@ -1,391 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
|
||||||
<el-form-item label="客户姓名" prop="customerName">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.customerName"
|
|
||||||
placeholder="请输入客户姓名"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="手机号码" prop="phonenumber">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.phonenumber"
|
|
||||||
placeholder="请输入手机号码"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="客户性别" prop="gender">
|
|
||||||
<el-select v-model="queryParams.gender" placeholder="请选择客户性别" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_user_gender"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
||||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
icon="Plus"
|
|
||||||
@click="handleAdd"
|
|
||||||
v-hasPermi="['mf:customer:add']"
|
|
||||||
>新增</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="success"
|
|
||||||
plain
|
|
||||||
icon="Edit"
|
|
||||||
:disabled="single"
|
|
||||||
@click="handleUpdate"
|
|
||||||
v-hasPermi="['mf:customer:edit']"
|
|
||||||
>修改</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="danger"
|
|
||||||
plain
|
|
||||||
icon="Delete"
|
|
||||||
:disabled="multiple"
|
|
||||||
@click="handleDelete"
|
|
||||||
v-hasPermi="['mf:customer:remove']"
|
|
||||||
>删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="warning"
|
|
||||||
plain
|
|
||||||
icon="Download"
|
|
||||||
@click="handleExport"
|
|
||||||
v-hasPermi="['mf:customer:export']"
|
|
||||||
>导出</el-button>
|
|
||||||
</el-col>
|
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
|
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
|
||||||
<el-table-column label="客户id" align="center" prop="customerId" />
|
|
||||||
<el-table-column label="客户姓名" align="center" prop="customerName" />
|
|
||||||
<el-table-column label="手机号码" align="center" prop="phonenumber" />
|
|
||||||
<el-table-column label="客户性别" align="center" prop="gender">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :options="sys_user_gender" :value="scope.row.gender"/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="客户生日" align="center" prop="birthday" width="180">
|
|
||||||
<template #default="scope">
|
|
||||||
<span>{{ parseTime(scope.row.birthday, '{y}-{m}-{d}') }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['mf:customer:edit']">修改</el-button>
|
|
||||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['mf:customer:remove']">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<pagination
|
|
||||||
v-show="total>0"
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNum"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 添加或修改客户主表对话框 -->
|
|
||||||
<el-dialog :title="title" v-model="open" width="780px" append-to-body>
|
|
||||||
<el-form ref="customerRef" :model="form" :rules="rules" label-width="80px">
|
|
||||||
<el-form-item label="客户姓名" prop="customerName">
|
|
||||||
<el-input v-model="form.customerName" placeholder="请输入客户姓名" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="手机号码" prop="phonenumber">
|
|
||||||
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="客户性别" prop="gender">
|
|
||||||
<el-select v-model="form.gender" placeholder="请选择客户性别">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_user_gender"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="客户生日" prop="birthday">
|
|
||||||
<el-date-picker clearable
|
|
||||||
v-model="form.birthday"
|
|
||||||
type="date"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
placeholder="请选择客户生日">
|
|
||||||
</el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="客户描述" prop="remark">
|
|
||||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-divider content-position="center">商品子表信息</el-divider>
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button type="primary" icon="Plus" @click="handleAddGoods">添加</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button type="danger" icon="Delete" @click="handleDeleteGoods">删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-table :data="goodsList" :row-class-name="rowGoodsIndex" @selection-change="handleGoodsSelectionChange" ref="goods">
|
|
||||||
<el-table-column type="selection" width="50" align="center" />
|
|
||||||
<el-table-column label="序号" align="center" prop="index" width="50"/>
|
|
||||||
<el-table-column label="商品名称" prop="name" width="150">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-input v-model="scope.row.name" placeholder="请输入商品名称" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品重量" prop="weight" width="150">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-input v-model="scope.row.weight" placeholder="请输入商品重量" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品价格" prop="price" width="150">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-input v-model="scope.row.price" placeholder="请输入商品价格" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品时间" prop="date" width="240">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-date-picker clearable
|
|
||||||
v-model="scope.row.date"
|
|
||||||
type="date"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
placeholder="请选择商品时间">
|
|
||||||
</el-date-picker>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="商品种类" prop="type" width="150">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-select v-model="scope.row.type" placeholder="请选择商品种类">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_goods_type"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
||||||
<el-button @click="cancel">取 消</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup name="Customer">
|
|
||||||
import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/mf/customer";
|
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { sys_goods_type, sys_user_gender } = proxy.useDict('sys_goods_type', 'sys_user_gender');
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const customerList = ref([]);
|
|
||||||
// 子表格数据
|
|
||||||
const goodsList = ref([]);
|
|
||||||
// 是否显示弹出层
|
|
||||||
const open = ref(false);
|
|
||||||
// 遮罩层
|
|
||||||
const loading = ref(true);
|
|
||||||
// 显示搜索条件
|
|
||||||
const showSearch = ref(true);
|
|
||||||
// 选中数组
|
|
||||||
const ids = ref([]);
|
|
||||||
// 子表选中数据
|
|
||||||
const checkedGoods = ref([]);
|
|
||||||
// 非单个禁用
|
|
||||||
const single = ref(true);
|
|
||||||
// 非多个禁用
|
|
||||||
const multiple = ref(true);
|
|
||||||
// 总条数
|
|
||||||
const total = ref(0);
|
|
||||||
// 弹出层标题
|
|
||||||
const title = ref("");
|
|
||||||
|
|
||||||
const data = reactive({
|
|
||||||
form: {},
|
|
||||||
queryParams: {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
customerName: null,
|
|
||||||
phonenumber: null,
|
|
||||||
gender: null,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const { queryParams, form, rules } = toRefs(data);
|
|
||||||
|
|
||||||
/** 查询客户主表列表 */
|
|
||||||
function getList() {
|
|
||||||
loading.value = true;
|
|
||||||
listCustomer(queryParams.value).then(response => {
|
|
||||||
customerList.value = response.rows;
|
|
||||||
total.value = response.total;
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 取消按钮
|
|
||||||
function cancel() {
|
|
||||||
open.value = false;
|
|
||||||
reset();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 表单重置
|
|
||||||
function reset() {
|
|
||||||
form.value = {
|
|
||||||
customerId: null,
|
|
||||||
customerName: null,
|
|
||||||
phonenumber: null,
|
|
||||||
gender: null,
|
|
||||||
birthday: null,
|
|
||||||
remark: null,
|
|
||||||
createBy: null,
|
|
||||||
createTime: null,
|
|
||||||
updateBy: null,
|
|
||||||
updateTime: null
|
|
||||||
};
|
|
||||||
goodsList.value = [];
|
|
||||||
proxy.resetForm("customerRef");
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
function handleQuery() {
|
|
||||||
queryParams.value.pageNum = 1;
|
|
||||||
getList();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
function resetQuery() {
|
|
||||||
proxy.resetForm("queryRef");
|
|
||||||
handleQuery();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 多选框选中数据
|
|
||||||
function handleSelectionChange(selection) {
|
|
||||||
ids.value = selection.map(item => item.customerId);
|
|
||||||
single.value = selection.length != 1;
|
|
||||||
multiple.value = !selection.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 新增按钮操作 */
|
|
||||||
function handleAdd() {
|
|
||||||
reset();
|
|
||||||
open.value = true;
|
|
||||||
title.value = "添加客户主表";
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 修改按钮操作 */
|
|
||||||
function handleUpdate(row) {
|
|
||||||
reset();
|
|
||||||
const _customerId = row.customerId || ids.value
|
|
||||||
getCustomer(_customerId).then(response => {
|
|
||||||
form.value = response.data;
|
|
||||||
goodsList.value = response.data.goodsList;
|
|
||||||
open.value = true;
|
|
||||||
title.value = "修改客户主表";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 提交按钮 */
|
|
||||||
function submitForm() {
|
|
||||||
proxy.$refs["customerRef"].validate(valid => {
|
|
||||||
if (valid) {
|
|
||||||
form.value.goodsList = goodsList.value;
|
|
||||||
if (form.value.customerId != null) {
|
|
||||||
updateCustomer(form.value).then(response => {
|
|
||||||
proxy.$modal.msgSuccess("修改成功");
|
|
||||||
open.value = false;
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
addCustomer(form.value).then(response => {
|
|
||||||
proxy.$modal.msgSuccess("新增成功");
|
|
||||||
open.value = false;
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
function handleDelete(row) {
|
|
||||||
const _customerIds = row.customerId || ids.value;
|
|
||||||
proxy.$modal.confirm('是否确认删除客户主表编号为"' + _customerIds + '"的数据项？').then(function() {
|
|
||||||
return delCustomer(_customerIds);
|
|
||||||
}).then(() => {
|
|
||||||
getList();
|
|
||||||
proxy.$modal.msgSuccess("删除成功");
|
|
||||||
}).catch(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 商品子表序号 */
|
|
||||||
function rowGoodsIndex({ row, rowIndex }) {
|
|
||||||
row.index = rowIndex + 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 商品子表添加按钮操作 */
|
|
||||||
function handleAddGoods() {
|
|
||||||
let obj = {};
|
|
||||||
obj.name = "";
|
|
||||||
obj.weight = "";
|
|
||||||
obj.price = "";
|
|
||||||
obj.date = "";
|
|
||||||
obj.type = "";
|
|
||||||
goodsList.value.push(obj);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 商品子表删除按钮操作 */
|
|
||||||
function handleDeleteGoods() {
|
|
||||||
if (checkedGoods.value.length == 0) {
|
|
||||||
proxy.$modal.msgError("请先选择要删除的商品子表数据");
|
|
||||||
} else {
|
|
||||||
const goodss = goodsList.value;
|
|
||||||
const checkedGoodss = checkedGoods.value;
|
|
||||||
goodsList.value = goodss.filter(function(item) {
|
|
||||||
return checkedGoodss.indexOf(item.index) == -1
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 复选框选中数据 */
|
|
||||||
function handleGoodsSelectionChange(selection) {
|
|
||||||
checkedGoods.value = selection.map(item => item.index)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 导出按钮操作 */
|
|
||||||
function handleExport() {
|
|
||||||
proxy.download('mf/customer/export', {
|
|
||||||
...queryParams.value
|
|
||||||
}, `customer_${new Date().getTime()}.xlsx`)
|
|
||||||
}
|
|
||||||
|
|
||||||
getList();
|
|
||||||
</script>
|
|
||||||
@ -1,289 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
|
||||||
<el-form-item label="产品名称" prop="productName">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.productName"
|
|
||||||
placeholder="请输入产品名称"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="产品状态" prop="status">
|
|
||||||
<el-select v-model="queryParams.status" placeholder="请选择产品状态" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_student_status"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
||||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
icon="Plus"
|
|
||||||
@click="handleAdd"
|
|
||||||
v-hasPermi="['mf:product:add']"
|
|
||||||
>新增</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="info"
|
|
||||||
plain
|
|
||||||
icon="Sort"
|
|
||||||
@click="toggleExpandAll"
|
|
||||||
>展开/折叠</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="warning"
|
|
||||||
plain
|
|
||||||
icon="Download"
|
|
||||||
@click="handleExport"
|
|
||||||
v-hasPermi="['mf:product:export']"
|
|
||||||
>导出</el-button>
|
|
||||||
</el-col>
|
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-table
|
|
||||||
v-if="refreshTable"
|
|
||||||
v-loading="loading"
|
|
||||||
:data="productList"
|
|
||||||
row-key="productId"
|
|
||||||
:default-expand-all="isExpandAll"
|
|
||||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
||||||
>
|
|
||||||
<el-table-column label="产品名称" align="center" prop="productName" />
|
|
||||||
<el-table-column label="显示顺序" align="center" prop="orderNum" />
|
|
||||||
<el-table-column label="产品状态" align="center" prop="status">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :options="sys_student_status" :value="scope.row.status"/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['mf:product:edit']">修改</el-button>
|
|
||||||
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['mf:product:add']">新增</el-button>
|
|
||||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['mf:product:remove']">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<!-- 添加或修改产品树对话框 -->
|
|
||||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
|
||||||
<el-form ref="productRef" :model="form" :rules="rules" label-width="80px">
|
|
||||||
<el-form-item label="父产品id" prop="parentId">
|
|
||||||
<el-tree-select
|
|
||||||
v-model="form.parentId"
|
|
||||||
:data="productOptions"
|
|
||||||
:props="{ value: 'productId', label: 'productName', children: 'children' }"
|
|
||||||
value-key="productId"
|
|
||||||
placeholder="请选择父产品id"
|
|
||||||
check-strictly
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="产品名称" prop="productName">
|
|
||||||
<el-input v-model="form.productName" placeholder="请输入产品名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="显示顺序" prop="orderNum">
|
|
||||||
<el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="产品状态" prop="status">
|
|
||||||
<el-radio-group v-model="form.status">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in sys_student_status"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.value"
|
|
||||||
>{{dict.label}}</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
||||||
<el-button @click="cancel">取 消</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup name="Product">
|
|
||||||
import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/mf/product";
|
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { sys_student_status } = proxy.useDict('sys_student_status');
|
|
||||||
|
|
||||||
// 树表表格数据
|
|
||||||
const productList = ref([]);
|
|
||||||
// 树选项
|
|
||||||
const productOptions = ref([]);
|
|
||||||
// 是否显示弹出层
|
|
||||||
const open = ref(false);
|
|
||||||
// 遮罩层
|
|
||||||
const loading = ref(true);
|
|
||||||
// 显示搜索条件
|
|
||||||
const showSearch = ref(true);
|
|
||||||
// 弹出层标题
|
|
||||||
const title = ref("");
|
|
||||||
// 是否展开，默认全部展开
|
|
||||||
const isExpandAll = ref(true);
|
|
||||||
// 重新渲染表格状态
|
|
||||||
const refreshTable = ref(true);
|
|
||||||
|
|
||||||
const data = reactive({
|
|
||||||
form: {},
|
|
||||||
queryParams: {
|
|
||||||
productName: null,
|
|
||||||
status: null,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
parentId: [
|
|
||||||
{ required: true, message: "父产品id不能为空", trigger: "blur" }
|
|
||||||
],
|
|
||||||
productName: [
|
|
||||||
{ required: true, message: "产品名称不能为空", trigger: "blur" }
|
|
||||||
],
|
|
||||||
orderNum: [
|
|
||||||
{ required: true, message: "显示顺序不能为空", trigger: "blur" }
|
|
||||||
],
|
|
||||||
status: [
|
|
||||||
{ required: true, message: "产品状态不能为空", trigger: "change" }
|
|
||||||
],
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const { queryParams, form, rules } = toRefs(data);
|
|
||||||
|
|
||||||
/** 查询产品树列表 */
|
|
||||||
function getList() {
|
|
||||||
loading.value = true;
|
|
||||||
listProduct(queryParams.value).then(response => {
|
|
||||||
productList.value = proxy.handleTree(response.data, "productId", "parentId");
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 取消按钮
|
|
||||||
function cancel() {
|
|
||||||
open.value = false;
|
|
||||||
reset();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 表单重置
|
|
||||||
function reset() {
|
|
||||||
form.value = {
|
|
||||||
productId: null,
|
|
||||||
parentId: null,
|
|
||||||
productName: null,
|
|
||||||
orderNum: null,
|
|
||||||
status: null,
|
|
||||||
createBy: null,
|
|
||||||
createTime: null,
|
|
||||||
updateBy: null,
|
|
||||||
updateTime: null
|
|
||||||
};
|
|
||||||
proxy.resetForm("productRef");
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
function handleQuery() {
|
|
||||||
getList();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
function resetQuery() {
|
|
||||||
proxy.resetForm("queryRef");
|
|
||||||
handleQuery();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 新增按钮操作 */
|
|
||||||
async function handleAdd(row) {
|
|
||||||
reset();
|
|
||||||
await listProduct().then(response => {
|
|
||||||
productOptions.value = proxy.handleTree(response.data, "productId");
|
|
||||||
});
|
|
||||||
if (row != null && row.productId) {
|
|
||||||
form.value.parentId = row.productId;
|
|
||||||
} else {
|
|
||||||
form.value.parentId = 0;
|
|
||||||
}
|
|
||||||
open.value = true;
|
|
||||||
title.value = "添加产品树";
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 展开/折叠操作 */
|
|
||||||
function toggleExpandAll() {
|
|
||||||
refreshTable.value = false;
|
|
||||||
isExpandAll.value = !isExpandAll.value;
|
|
||||||
nextTick(() => {
|
|
||||||
refreshTable.value = true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 修改按钮操作 */
|
|
||||||
async function handleUpdate(row) {
|
|
||||||
reset();
|
|
||||||
await listProduct().then(response => {
|
|
||||||
productOptions.value = proxy.handleTree(response.data, "productId");
|
|
||||||
});
|
|
||||||
if (row != null) {
|
|
||||||
form.value.parentId = row.productId;
|
|
||||||
}
|
|
||||||
getProduct(row.productId).then(response => {
|
|
||||||
form.value = response.data;
|
|
||||||
open.value = true;
|
|
||||||
title.value = "修改产品树";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 提交按钮 */
|
|
||||||
function submitForm() {
|
|
||||||
proxy.$refs["productRef"].validate(valid => {
|
|
||||||
if (valid) {
|
|
||||||
if (form.value.productId != null) {
|
|
||||||
updateProduct(form.value).then(response => {
|
|
||||||
proxy.$modal.msgSuccess("修改成功");
|
|
||||||
open.value = false;
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
addProduct(form.value).then(response => {
|
|
||||||
proxy.$modal.msgSuccess("新增成功");
|
|
||||||
open.value = false;
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
function handleDelete(row) {
|
|
||||||
proxy.$modal.confirm('是否确认删除产品树编号为"' + row.productId + '"的数据项？').then(function() {
|
|
||||||
return delProduct(row.productId);
|
|
||||||
}).then(() => {
|
|
||||||
getList();
|
|
||||||
proxy.$modal.msgSuccess("删除成功");
|
|
||||||
}).catch(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 导出按钮操作 */
|
|
||||||
function handleExport() {
|
|
||||||
proxy.download('mf/product/export', {
|
|
||||||
...queryParams.value
|
|
||||||
}, `product_${new Date().getTime()}.xlsx`)
|
|
||||||
}
|
|
||||||
|
|
||||||
getList();
|
|
||||||
</script>
|
|
||||||
@ -1,336 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
|
||||||
<el-form-item label="学生名称" prop="studentName">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.studentName"
|
|
||||||
placeholder="请输入学生名称"
|
|
||||||
clearable
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="studentStatus">
|
|
||||||
<el-select v-model="queryParams.studentStatus" placeholder="请选择状态" clearable>
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_student_status"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
||||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
plain
|
|
||||||
icon="Plus"
|
|
||||||
@click="handleAdd"
|
|
||||||
v-hasPermi="['mf:student:add']"
|
|
||||||
>新增</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="success"
|
|
||||||
plain
|
|
||||||
icon="Edit"
|
|
||||||
:disabled="single"
|
|
||||||
@click="handleUpdate"
|
|
||||||
v-hasPermi="['mf:student:edit']"
|
|
||||||
>修改</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="danger"
|
|
||||||
plain
|
|
||||||
icon="Delete"
|
|
||||||
:disabled="multiple"
|
|
||||||
@click="handleDelete"
|
|
||||||
v-hasPermi="['mf:student:remove']"
|
|
||||||
>删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="warning"
|
|
||||||
plain
|
|
||||||
icon="Download"
|
|
||||||
@click="handleExport"
|
|
||||||
v-hasPermi="['mf:student:export']"
|
|
||||||
>导出</el-button>
|
|
||||||
</el-col>
|
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-table v-loading="loading" :data="studentList" @selection-change="handleSelectionChange">
|
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
|
||||||
<el-table-column label="编号" align="center" prop="studentId" />
|
|
||||||
<el-table-column label="学生名称" align="center" prop="studentName" />
|
|
||||||
<el-table-column label="年龄" align="center" prop="studentAge" />
|
|
||||||
<el-table-column label="爱好" align="center" prop="studentHobby">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :options="sys_student_hobby" :value="scope.row.studentHobby"/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="性别" align="center" prop="studentGender">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :options="sys_user_gender" :value="scope.row.studentGender"/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="状态" align="center" prop="studentStatus">
|
|
||||||
<template #default="scope">
|
|
||||||
<dict-tag :options="sys_student_status" :value="scope.row.studentStatus"/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="生日" align="center" prop="studentBirthday" width="180">
|
|
||||||
<template #default="scope">
|
|
||||||
<span>{{ parseTime(scope.row.studentBirthday, '{y}-{m}-{d}') }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['mf:student:edit']">修改</el-button>
|
|
||||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['mf:student:remove']">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<pagination
|
|
||||||
v-show="total>0"
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNum"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 添加或修改学生信息表对话框 -->
|
|
||||||
<el-dialog :title="title" v-model="open" width="780px" append-to-body>
|
|
||||||
<el-form ref="studentRef" :model="form" :rules="rules" label-width="80px">
|
|
||||||
<el-form-item label="学生名称" prop="studentName">
|
|
||||||
<el-input v-model="form.studentName" placeholder="请输入学生名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="年龄" prop="studentAge">
|
|
||||||
<el-input v-model="form.studentAge" placeholder="请输入年龄" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="爱好" prop="studentHobby">
|
|
||||||
<el-select v-model="form.studentHobby" placeholder="请选择爱好">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_student_hobby"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="性别" prop="studentGender">
|
|
||||||
<el-radio-group v-model="form.studentGender">
|
|
||||||
<el-radio
|
|
||||||
v-for="dict in sys_user_gender"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.value"
|
|
||||||
>{{dict.label}}</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态" prop="studentStatus">
|
|
||||||
<el-select v-model="form.studentStatus" placeholder="请选择状态">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in sys_student_status"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="生日" prop="studentBirthday">
|
|
||||||
<el-date-picker clearable
|
|
||||||
v-model="form.studentBirthday"
|
|
||||||
type="date"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
placeholder="请选择生日">
|
|
||||||
</el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
||||||
<el-button @click="cancel">取 消</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup name="Student">
|
|
||||||
import { listStudent, getStudent, delStudent, addStudent, updateStudent } from "@/api/mf/student";
|
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const { sys_student_status, sys_user_gender, sys_student_hobby } = proxy.useDict('sys_student_status', 'sys_user_gender', 'sys_student_hobby');
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const studentList = ref([]);
|
|
||||||
// 是否显示弹出层
|
|
||||||
const open = ref(false);
|
|
||||||
// 遮罩层
|
|
||||||
const loading = ref(true);
|
|
||||||
// 显示搜索条件
|
|
||||||
const showSearch = ref(true);
|
|
||||||
// 选中数组
|
|
||||||
const ids = ref([]);
|
|
||||||
// 非单个禁用
|
|
||||||
const single = ref(true);
|
|
||||||
// 非多个禁用
|
|
||||||
const multiple = ref(true);
|
|
||||||
// 总条数
|
|
||||||
const total = ref(0);
|
|
||||||
// 弹出层标题
|
|
||||||
const title = ref("");
|
|
||||||
|
|
||||||
const data = reactive({
|
|
||||||
form: {},
|
|
||||||
queryParams: {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
studentName: null,
|
|
||||||
studentStatus: null,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
studentName: [
|
|
||||||
{ required: true, message: "学生名称不能为空", trigger: "blur" }
|
|
||||||
],
|
|
||||||
studentAge: [
|
|
||||||
{ required: true, message: "年龄不能为空", trigger: "blur" }
|
|
||||||
],
|
|
||||||
studentHobby: [
|
|
||||||
{ required: true, message: "爱好不能为空", trigger: "change" }
|
|
||||||
],
|
|
||||||
studentGender: [
|
|
||||||
{ required: true, message: "性别不能为空", trigger: "change" }
|
|
||||||
],
|
|
||||||
studentStatus: [
|
|
||||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
|
||||||
],
|
|
||||||
studentBirthday: [
|
|
||||||
{ required: true, message: "生日不能为空", trigger: "blur" }
|
|
||||||
],
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const { queryParams, form, rules } = toRefs(data);
|
|
||||||
|
|
||||||
/** 查询学生信息表列表 */
|
|
||||||
function getList() {
|
|
||||||
loading.value = true;
|
|
||||||
listStudent(queryParams.value).then(response => {
|
|
||||||
studentList.value = response.rows;
|
|
||||||
total.value = response.total;
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 取消按钮
|
|
||||||
function cancel() {
|
|
||||||
open.value = false;
|
|
||||||
reset();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 表单重置
|
|
||||||
function reset() {
|
|
||||||
form.value = {
|
|
||||||
studentId: null,
|
|
||||||
studentName: null,
|
|
||||||
studentAge: null,
|
|
||||||
studentHobby: null,
|
|
||||||
studentGender: null,
|
|
||||||
studentStatus: null,
|
|
||||||
studentBirthday: null,
|
|
||||||
createBy: null,
|
|
||||||
createTime: null,
|
|
||||||
updateBy: null,
|
|
||||||
updateTime: null
|
|
||||||
};
|
|
||||||
proxy.resetForm("studentRef");
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
function handleQuery() {
|
|
||||||
queryParams.value.pageNum = 1;
|
|
||||||
getList();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
function resetQuery() {
|
|
||||||
proxy.resetForm("queryRef");
|
|
||||||
handleQuery();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 多选框选中数据
|
|
||||||
function handleSelectionChange(selection) {
|
|
||||||
ids.value = selection.map(item => item.studentId);
|
|
||||||
single.value = selection.length != 1;
|
|
||||||
multiple.value = !selection.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 新增按钮操作 */
|
|
||||||
function handleAdd() {
|
|
||||||
reset();
|
|
||||||
open.value = true;
|
|
||||||
title.value = "添加学生信息表";
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 修改按钮操作 */
|
|
||||||
function handleUpdate(row) {
|
|
||||||
reset();
|
|
||||||
const _studentId = row.studentId || ids.value
|
|
||||||
getStudent(_studentId).then(response => {
|
|
||||||
form.value = response.data;
|
|
||||||
open.value = true;
|
|
||||||
title.value = "修改学生信息表";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 提交按钮 */
|
|
||||||
function submitForm() {
|
|
||||||
proxy.$refs["studentRef"].validate(valid => {
|
|
||||||
if (valid) {
|
|
||||||
if (form.value.studentId != null) {
|
|
||||||
updateStudent(form.value).then(response => {
|
|
||||||
proxy.$modal.msgSuccess("修改成功");
|
|
||||||
open.value = false;
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
addStudent(form.value).then(response => {
|
|
||||||
proxy.$modal.msgSuccess("新增成功");
|
|
||||||
open.value = false;
|
|
||||||
getList();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
function handleDelete(row) {
|
|
||||||
const _studentIds = row.studentId || ids.value;
|
|
||||||
proxy.$modal.confirm('是否确认删除学生信息表编号为"' + _studentIds + '"的数据项？').then(function() {
|
|
||||||
return delStudent(_studentIds);
|
|
||||||
}).then(() => {
|
|
||||||
getList();
|
|
||||||
proxy.$modal.msgSuccess("删除成功");
|
|
||||||
}).catch(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 导出按钮操作 */
|
|
||||||
function handleExport() {
|
|
||||||
proxy.download('mf/student/export', {
|
|
||||||
...queryParams.value
|
|
||||||
}, `student_${new Date().getTime()}.xlsx`)
|
|
||||||
}
|
|
||||||
|
|
||||||
getList();
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue
Block a user