1、开发主页内容（未完成）
chris
6 days ago
parent
12bb89ec3e
commit
c725addaa1
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-for="(options, index) in dialogStore"
|
||||
:key="index"
|
||||
v-bind="options"
|
||||
v-model="options.visible"
|
||||
:fullscreen="fullscreen ? true : options?.fullscreen ? true : false"
|
||||
@closed="handleClose(options, index)"
|
||||
@opened="eventsCallBack('open', options, index)"
|
||||
@openAutoFocus="eventsCallBack('openAutoFocus', options, index)"
|
||||
@closeAutoFocus="eventsCallBack('closeAutoFocus', options, index)"
|
||||
>
|
||||
<!-- header -->
|
||||
<template
|
||||
v-if="options?.fullscreenIcon || options?.headerRenderer"
|
||||
#header="{ close, titleId, titleClass }"
|
||||
>
|
||||
<div
|
||||
v-if="options?.fullscreenIcon"
|
||||
class="flex items-center justify-between"
|
||||
>
|
||||
<span :id="titleId" :class="titleClass">{{ options?.title }}</span>
|
||||
<i
|
||||
v-if="!options?.fullscreen"
|
||||
:class="fullscreenClass"
|
||||
@click="
|
||||
() => {
|
||||
fullscreen = !fullscreen;
|
||||
eventsCallBack(
|
||||
'fullscreenCallBack',
|
||||
{ ...options, fullscreen },
|
||||
index,
|
||||
true
|
||||
);
|
||||
}
|
||||
"
|
||||
>
|
||||
<!-- <IconifyIconOffline
|
||||
class="pure-dialog-svg"
|
||||
:icon="
|
||||
options?.fullscreen
|
||||
? ExitFullscreen
|
||||
: fullscreen
|
||||
? ExitFullscreen
|
||||
: Fullscreen
|
||||
"
|
||||
/> -->
|
||||
</i>
|
||||
</div>
|
||||
<component
|
||||
:is="options?.headerRenderer({ close, titleId, titleClass })"
|
||||
v-else
|
||||
/>
|
||||
</template>
|
||||
<component
|
||||
v-bind="options?.props"
|
||||
:is="options.contentRenderer({ options, index })"
|
||||
@close="args => handleClose(options, index, args)"
|
||||
/>
|
||||
<!-- footer -->
|
||||
<template v-if="!options?.hideFooter" #footer>
|
||||
<template v-if="options?.footerRenderer">
|
||||
<component :is="options?.footerRenderer({ options, index })" />
|
||||
</template>
|
||||
<span v-else>
|
||||
<template v-for="(btn, key) in footerButtons(options)" :key="key">
|
||||
<el-popconfirm
|
||||
v-if="btn.popconfirm"
|
||||
v-bind="btn.popconfirm"
|
||||
@confirm="
|
||||
btn.btnClick({
|
||||
dialog: { options, index },
|
||||
button: { btn, index: key }
|
||||
})
|
||||
"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button v-bind="btn">{{ btn?.label }}</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-button
|
||||
v-else
|
||||
v-bind="btn"
|
||||
:loading="key === 1 && sureBtnMap[index]?.loading"
|
||||
@click="
|
||||
btn.btnClick({
|
||||
dialog: { options, index },
|
||||
button: { btn, index: key }
|
||||
})
|
||||
"
|
||||
>
|
||||
{{ btn?.label }}
|
||||
</el-button>
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { dialogStore } from "./index";
|
||||
import { ref, computed } from "vue";
|
||||
import { isFunction } from "@pureadmin/utils";
|
||||
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
|
||||
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
|
||||
|
||||
|
||||
const sureBtnMap = ref({});
|
||||
const fullscreen = ref(false);
|
||||
|
||||
const footerButtons = computed(() => {
|
||||
return (options) => {
|
||||
return options?.footerButtons?.length > 0
|
||||
? options.footerButtons
|
||||
: ([
|
||||
{
|
||||
label: "取消",
|
||||
text: true,
|
||||
bg: true,
|
||||
btnClick: ({ dialog: { options, index } }) => {
|
||||
const done = () =>
|
||||
closeDialog(options, index, { command: "cancel" });
|
||||
if (options?.beforeCancel && isFunction(options?.beforeCancel)) {
|
||||
options.beforeCancel(done, { options, index });
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "确定",
|
||||
type: "primary",
|
||||
text: true,
|
||||
bg: true,
|
||||
popconfirm: options?.popconfirm,
|
||||
btnClick: ({ dialog: { options, index } }) => {
|
||||
if (options?.sureBtnLoading) {
|
||||
sureBtnMap.value[index] = Object.assign(
|
||||
{},
|
||||
sureBtnMap.value[index],
|
||||
{
|
||||
loading: true
|
||||
}
|
||||
);
|
||||
}
|
||||
const closeLoading = () => {
|
||||
if (options?.sureBtnLoading) {
|
||||
sureBtnMap.value[index].loading = false;
|
||||
}
|
||||
};
|
||||
const done = () => {
|
||||
closeLoading();
|
||||
closeDialog(options, index, { command: "sure" });
|
||||
};
|
||||
if (options?.beforeSure && isFunction(options?.beforeSure)) {
|
||||
options.beforeSure(done, { options, index, closeLoading });
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
};
|
||||
});
|
||||
|
||||
const fullscreenClass = computed(() => {
|
||||
return [
|
||||
"el-icon",
|
||||
"el-dialog__close",
|
||||
"-translate-x-2",
|
||||
"cursor-pointer",
|
||||
"hover:!text-[red]"
|
||||
];
|
||||
});
|
||||
|
||||
function eventsCallBack( event, options, index, isClickFullScreen = false ) {
|
||||
if (!isClickFullScreen) fullscreen.value = options?.fullscreen ?? false;
|
||||
if (options?.[event] && isFunction(options?.[event])) {
|
||||
return options?.[event]({ options, index });
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose( options, index, args = { command: "close" }) {
|
||||
closeDialog(options, index, args);
|
||||
eventsCallBack("close", options, index);
|
||||
}
|
||||
</script>
|
||||
@ -1,313 +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="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入客户名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属类别">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择" style="width: 200px;">
|
||||
<el-option
|
||||
v-for="item in customer_type"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.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="['business:customer:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="edit"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['business:customer:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['business:customer:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="download"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['business:customer:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="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="客户编码" align="center" prop="code" />
|
||||
<el-table-column label="客户名称" align="center" prop="name" />
|
||||
<el-table-column label="所属类别" align="center" prop="type">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="customer_type" :value="scope.row.type"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="业务状态" align="center" prop="businessStatus">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="customer_business_status" :value="scope.row.businessStatus"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="联系人姓名" align="center" prop="contactsName" />
|
||||
<el-table-column label="联系人电话" align="center" prop="contactsPhone" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
icon="edit"
|
||||
type="primary"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['business:customer:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
link
|
||||
icon="delete"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['business:customer:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改客户信息对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
|
||||
<el-form-item label="客户编码" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入客户编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户名称" prop="code">
|
||||
<el-input v-model="form.name" placeholder="请输入客户名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属类别" prop="code">
|
||||
<el-select v-model="form.type" placeholder="请选择所属类别">
|
||||
<el-option
|
||||
v-for="item in customer_type"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务状态" prop="businessStatus">
|
||||
<el-select v-model="form.businessStatus" placeholder="请选择业务状态">
|
||||
<el-option
|
||||
v-for="item in customer_business_status"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人姓名" prop="contactsName">
|
||||
<el-input v-model="form.contactsName" placeholder="请输入联系人姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人电话" prop="contactsPhone">
|
||||
<el-input v-model="form.contactsPhone" placeholder="请输入联系人电话" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/customer/info";
|
||||
import useForm from '@/hooks/useForm.js';
|
||||
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
code: null,
|
||||
name: null,
|
||||
contactsName: null,
|
||||
contactsPhone: null,
|
||||
type: null,
|
||||
businessStatus: null,
|
||||
}
|
||||
|
||||
const defaultParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
contactsName: null,
|
||||
type: null
|
||||
}
|
||||
|
||||
const formRef = ref(null);
|
||||
const queryRef = ref(null);
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const data = reactive({
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 分类表格数据
|
||||
customerList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
})
|
||||
|
||||
const { loading, ids, single, multiple, showSearch, total, customerList, title, open, rules, typeOptions } = toRefs(data);
|
||||
|
||||
const { form, validateForm, resetForm } = useForm(formRef, defaultForm)
|
||||
const { form: queryParams, resetForm: resetQueryForm } = useForm(queryRef, defaultParams)
|
||||
|
||||
|
||||
const { customer_business_status, customer_type } = proxy.useDict('customer_business_status', 'customer_type');
|
||||
getList();
|
||||
|
||||
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() {
|
||||
resetForm();
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
resetQueryForm();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map(item => item.id)
|
||||
single.value = selection.length!==1
|
||||
multiple.value = !selection.length
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加客户信息";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const id = row.id || ids.value
|
||||
getCustomer(id).then(response => {
|
||||
form.value = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改客户信息";
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
validateForm().then(() => {
|
||||
if (form.value.id != 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 ids = row.id || ids.value;
|
||||
proxy.$modal.confirm('是否确认删除分类编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delCustomer(ids);
|
||||
}).then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download('business/customer/export', {
|
||||
...queryParams.value
|
||||
}, `customer_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -1,320 +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="customerId">
|
||||
<el-input
|
||||
v-model="queryParams.customerId"
|
||||
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="['business:customer-staff:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="edit"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['business:customer-staff:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['business:customer-staff:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="download"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['business:customer-staff:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="memberList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="所属客户" align="center" prop="customer" />
|
||||
<el-table-column label="员工姓名" align="center" prop="name" />
|
||||
<el-table-column label="性别" align="center" prop="sex">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="customer_sex" :value="scope.row.sex"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="员工职位" align="center" prop="post" />
|
||||
<el-table-column label="员工电话" align="center" prop="phone" />
|
||||
<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="['business:customer-staff:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
icon="delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['business:customer-staff:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改客户人员信息对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="所属客户" prop="customerId">
|
||||
<el-select
|
||||
v-model="form.customerId"
|
||||
filterable
|
||||
remote
|
||||
placeholder="请输入关键词搜索"
|
||||
remote-show-suffix
|
||||
:remote-method="($event) => remoteMethod($event, remoteCustomer)"
|
||||
:loading="remoteLoading"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in customerList"
|
||||
:key="item.id"
|
||||
:label="item.contactsName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="员工姓名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入员工姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="员工性别" prop="sex">
|
||||
<el-select v-model="form.sex" placeholder="请选择性别">
|
||||
<el-option
|
||||
v-for="item in customer_sex"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="员工职位" prop="post">
|
||||
<el-input v-model="form.post" placeholder="请输入员工职位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="员工电话" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="请输入员工电话" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { listCustomerStaff, getCustomerStaff, delCustomerStaff, addCustomerStaff, updateCustomerStaff } from "@/api/customer/member";
|
||||
import { listCustomer } from "@/api/customer/info";
|
||||
import useForm from '@/hooks/useForm.js';
|
||||
import useRemote from '@/hooks/useRemote.js';
|
||||
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
code: null,
|
||||
name: null,
|
||||
contactsName: null,
|
||||
contactsPhone: null,
|
||||
type: null,
|
||||
businessStatus: null,
|
||||
}
|
||||
|
||||
const defaultParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
contactsName: null,
|
||||
type: null
|
||||
}
|
||||
|
||||
const formRef = ref(null);
|
||||
const queryRef = ref(null);
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const data = reactive({
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 分类表格数据
|
||||
memberList: [],
|
||||
customerList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
})
|
||||
|
||||
const { loading, ids, single, multiple, showSearch, total, memberList, title, open, rules, customerList } = toRefs(data);
|
||||
|
||||
const { form, validateForm, resetForm } = useForm(formRef, defaultForm)
|
||||
const { form: queryParams, resetForm: resetQueryForm } = useForm(queryRef, defaultParams)
|
||||
|
||||
const { customer_sex } = proxy.useDict('customer_sex')
|
||||
getList();
|
||||
|
||||
const { loading: remoteLoading, remoteMethod } = useRemote();
|
||||
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listCustomerStaff(queryParams.value).then(response => {
|
||||
memberList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function remoteCustomer (query) {
|
||||
const params = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
contactsName: query
|
||||
}
|
||||
return listCustomer(params).then(resp => {
|
||||
return customerList.value = resp.rows;
|
||||
})
|
||||
}
|
||||
|
||||
function backFillSelectData (data) {
|
||||
data.customerId && (customerList.value = [{ id: data.customerId, contactsName: data.customer }])
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
resetForm();
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
resetQueryForm();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map(item => item.id)
|
||||
single.value = selection.length!==1
|
||||
multiple.value = !selection.length
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加人员信息";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const id = row.id || ids.value
|
||||
getCustomerStaff(id).then(response => {
|
||||
form.value = response.data;
|
||||
backFillSelectData(response.data);
|
||||
open.value = true;
|
||||
title.value = "修改人员信息";
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
validateForm().then(() => {
|
||||
if (form.value.id != null) {
|
||||
updateCustomerStaff(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
addCustomerStaff(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const ids = row.id || ids.value;
|
||||
proxy.$modal.confirm('是否确认删除分类编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delCustomerStaff(ids);
|
||||
}).then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download('business/customer-staff/export', {
|
||||
...queryParams.value
|
||||
}, `customer_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
</script>
|
||||
@ -1,78 +1,192 @@
|
||||
<template>
|
||||
<div class="app-container home">
|
||||
主页
|
||||
<div class="app-container home" :class="{ 'hasTagsView': hasTags }">
|
||||
<section class="home-top">
|
||||
<div class="sort-info">
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="index == 0 ? 6 : 3" v-for="(item, index) in infoItems" :key="index">
|
||||
<div class="info-item" :style="`background-color: ${colorList[item.type].color}`">
|
||||
<Icon :icon="colorList[item.type].icon" class="info-item__icon"/>
|
||||
<div class="info-msg">
|
||||
<p class="msg-title">{{ item.title }}</p>
|
||||
<span class="msg-num">{{ item.num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</section>
|
||||
<section class="home-content">
|
||||
<el-row :gutter="12" class="h-100%">
|
||||
<el-col :span="4">
|
||||
<el-card class="device-list">
|
||||
<template #header>
|
||||
<span class="card-title">设备列表</span>
|
||||
</template>
|
||||
<device-list />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="20" class="!flex flex-col">
|
||||
<el-row :gutter="12" class="m-b-12px flex-1">
|
||||
<el-col :span="14">
|
||||
<el-card class="device-map h-100%">
|
||||
<template #header>
|
||||
<span class="card-title">设备地图</span>
|
||||
</template>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-card class="device-info h-100%">
|
||||
<template #header>
|
||||
<span class="card-title">设备信息</span>
|
||||
</template>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card class="live-data h-350px">
|
||||
<template #header>
|
||||
<span class="card-title">实时数据</span>
|
||||
</template>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Index">
|
||||
const version = ref('3.8.8')
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import deviceList from './indexComponents/deviceList.vue'
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
const infoItems = reactive([
|
||||
{
|
||||
type: 'device',
|
||||
title: '设备总数',
|
||||
num: 12
|
||||
},
|
||||
{
|
||||
type: 'pest',
|
||||
title: '虫情监测设备',
|
||||
num: 6
|
||||
},
|
||||
{
|
||||
type: 'environment',
|
||||
title: '环境监测设备',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
type: 'soil',
|
||||
title: '土壤监测设备',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
type: 'online',
|
||||
title: '在线设备',
|
||||
num: 18
|
||||
},
|
||||
{
|
||||
type: 'offline',
|
||||
title: '离线设备',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
type: 'abnormal',
|
||||
title: '异常设备',
|
||||
num: 2
|
||||
}
|
||||
])
|
||||
|
||||
function goTarget(url) {
|
||||
window.open(url, '__blank')
|
||||
const colorList = readonly({
|
||||
device:{
|
||||
icon: 'carbon:devices',
|
||||
color: '#329874'
|
||||
},
|
||||
pest:{
|
||||
icon: 'carbon:pest',
|
||||
color: '#b47a3e'
|
||||
},
|
||||
environment:{
|
||||
icon: 'carbon:radar-weather',
|
||||
color: '#396a98'
|
||||
},
|
||||
soil:{
|
||||
icon: 'carbon:soil-moisture',
|
||||
color: '#45969f'
|
||||
},
|
||||
online:{
|
||||
icon: 'carbon:link',
|
||||
color: '#3aa534'
|
||||
},
|
||||
offline:{
|
||||
icon: 'carbon:unlink',
|
||||
color: '#808890'
|
||||
},
|
||||
abnormal:{
|
||||
icon: 'carbon:warning',
|
||||
color: '#c04747'
|
||||
}
|
||||
})
|
||||
|
||||
const hasTags = computed(() => settingsStore.tagsView);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home {
|
||||
blockquote {
|
||||
padding: 10px 20px;
|
||||
margin: 0 0 20px;
|
||||
font-size: 17.5px;
|
||||
border-left: 5px solid #eee;
|
||||
height: calc(100vh - 50px);
|
||||
|
||||
&.hasTagsView {
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
hr {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 0;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.col-item {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.home-top {
|
||||
@apply m-b-12px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
.home-content {
|
||||
height: calc(100% - 86px);
|
||||
}
|
||||
|
||||
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #676a6c;
|
||||
overflow-x: hidden;
|
||||
$infoIconSize: 38px;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
.info-item {
|
||||
@apply flex justify-between items-center;
|
||||
padding: 12px 15px;
|
||||
color: #fff;
|
||||
background-color: #25598a;
|
||||
border-radius: 8px;
|
||||
|
||||
h4 {
|
||||
margin-top: 0px;
|
||||
&.device-num {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 10px;
|
||||
font-size: 26px;
|
||||
font-weight: 100;
|
||||
.info-msg {
|
||||
@apply text-right;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
.msg-title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: 700;
|
||||
.msg-num {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.update-log {
|
||||
ol {
|
||||
display: block;
|
||||
list-style-type: decimal;
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
padding-inline-start: 40px;
|
||||
}
|
||||
.info-item__icon {
|
||||
width: $infoIconSize;
|
||||
height: $infoIconSize;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.device-list {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<el-tree
|
||||
:data="defaultData"
|
||||
node-key="id"
|
||||
:expand-on-click-node="false"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<div class="custom-tree-node">
|
||||
<Icon :icon="treeNodeIcon(node)" class="node-icon" />
|
||||
<span>{{ node.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</template>
|
||||
|
||||
<script setup name="DeviceList">
|
||||
const nodeIconDict = readonly({
|
||||
worm: 'carbon:pest',
|
||||
soil: 'carbon:soil-moisture',
|
||||
met: 'carbon:radar-weather',
|
||||
other: 'carbon:devices'
|
||||
})
|
||||
|
||||
const defaultData = readonly([
|
||||
{
|
||||
id: 1,
|
||||
label: '区域1',
|
||||
children: [
|
||||
{ id: 2, label: '虫情检测001', type: 'worm' },
|
||||
{ id: 3, label: '气象站001', type: 'met' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: '区域2',
|
||||
children: [
|
||||
{ id: 5, label: '虫情检测002', type: 'worm' },
|
||||
{ id: 6, label: '气象站002', type: 'met' }
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
function treeNodeIcon(node) {
|
||||
console.log(node)
|
||||
const type = node.data.type
|
||||
return node.level === 1 ? 'carbon:cics-system-group' : (nodeIconDict[type] || nodeIconDict['other'])
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-tree-node {
|
||||
@apply flex items-center;
|
||||
|
||||
.node-icon {
|
||||
@apply mr-5px color-#409EFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,353 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
|
||||
<pane size="8">
|
||||
<el-segmented :options="categoryOptions" size="large" v-model="queryParams.type" direction="vertical" @change="categoryChange"/>
|
||||
</pane>
|
||||
<pane size="92">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入分类名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="queryParams.type" :label="levelName">
|
||||
<el-select
|
||||
v-model="queryParams.pid"
|
||||
filterable
|
||||
remote
|
||||
placeholder="请输入关键词搜索"
|
||||
remote-show-suffix
|
||||
:remote-method="($event) => remoteMethod($event, remoteParent)"
|
||||
:loading="remoteLoading"
|
||||
@blur="remoteBlur"
|
||||
style="width: 200px;"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in parentList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</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="['business:category:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="edit"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['business:category:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['business:category:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="download"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['business:category:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="分类名称" align="center" prop="name" />
|
||||
<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
|
||||
link
|
||||
type="primary"
|
||||
icon="edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['business:category:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
icon="delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['business:category: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="500px" append-to-body>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入分类名称" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="levelName" prop="pid" v-if="queryParams.type">
|
||||
<el-select
|
||||
v-model="form.pid"
|
||||
filterable
|
||||
remote
|
||||
placeholder="请输入关键词搜索"
|
||||
remote-show-suffix
|
||||
:remote-method="($event) => remoteMethod($event, remoteParent)"
|
||||
:loading="remoteLoading"
|
||||
@blur="remoteBlur"
|
||||
style="width: 200px;"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in parentList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/product/category";
|
||||
import useForm from '@/hooks/useForm.js';
|
||||
import useRemote from '@/hooks/useRemote.js';
|
||||
import { Splitpanes, Pane } from "splitpanes"
|
||||
import "splitpanes/dist/splitpanes.css"
|
||||
import useAppStore from '@/store/modules/app'
|
||||
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
name: null,
|
||||
type: 0,
|
||||
pid: null,
|
||||
}
|
||||
|
||||
const defaultParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
type: 0,
|
||||
pid: null
|
||||
}
|
||||
|
||||
const formRef = ref(null);
|
||||
const queryRef = ref(null);
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const data = reactive({
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 分类表格数据
|
||||
categoryList: [],
|
||||
parentList: [],
|
||||
categoryOptions: [
|
||||
{
|
||||
value: 0,
|
||||
label: '一级分类'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '二级分类'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '三级分类'
|
||||
},
|
||||
],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
})
|
||||
|
||||
const { loading, ids, single, multiple, showSearch, total, categoryList, title, open, rules, categoryOptions, parentList } = toRefs(data);
|
||||
|
||||
const { form, validateForm, resetForm } = useForm(formRef, defaultForm)
|
||||
const { form: queryParams, resetForm: resetQueryForm } = useForm(queryRef, defaultParams)
|
||||
const { loading: remoteLoading, remoteMethod } = useRemote()
|
||||
|
||||
getList();
|
||||
|
||||
const levelName = computed(() => {
|
||||
const name = categoryOptions.value.find(item => item.value == queryParams.value.type - 1).label
|
||||
return `${name}名称`
|
||||
})
|
||||
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listCategory(queryParams.value).then(response => {
|
||||
categoryList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function remoteParent (query) {
|
||||
const params = {
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
type: queryParams.value.type - 1,
|
||||
name: query
|
||||
}
|
||||
return listCategory(params).then(response => {
|
||||
parentList.value = response.rows;
|
||||
});
|
||||
}
|
||||
|
||||
function categoryChange () {
|
||||
queryParams.value.name = queryParams.value.pid = null;
|
||||
form.value.type = queryParams.value.type;
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
function remoteBlur() {
|
||||
parentList.value = [];
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
resetForm();
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
resetQueryForm();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map(item => item.id)
|
||||
single.value = selection.length!==1
|
||||
multiple.value = !selection.length
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加分类";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const id = row.id || ids.value
|
||||
getCategory(id).then(response => {
|
||||
form.value = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改分类";
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
validateForm().then(() => {
|
||||
if (form.value.id != null) {
|
||||
updateCategory(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
addCategory(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const ids = row.id || ids.value;
|
||||
proxy.$modal.confirm('是否确认删除分类编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delCategory(ids);
|
||||
}).then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download('business/category/export', {
|
||||
...queryParams.value
|
||||
}, `category_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -1,262 +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="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
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="['business:products-category:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="edit"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['business:products-category:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['business:products-category:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="download"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['business:products-category:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="分类名称" align="center" prop="name" />
|
||||
<el-table-column label="分类编码" align="center" prop="code" />
|
||||
<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
|
||||
link
|
||||
type="primary"
|
||||
icon="edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['business:products-category:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
icon="delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['business:products-category: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="500px" append-to-body>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入分类名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类编码" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入分类编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { listProductsCategory, getProductsCategory, delProductsCategory, addProductsCategory, updateProductsCategory } from "@/api/product/productsCategory";
|
||||
|
||||
import useForm from '@/hooks/useForm.js';
|
||||
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
name: null,
|
||||
code: null,
|
||||
remark: null
|
||||
}
|
||||
|
||||
const defaultParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
code: null
|
||||
}
|
||||
|
||||
const formRef = ref(null);
|
||||
const queryRef = ref(null);
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const data = reactive({
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 分类表格数据
|
||||
categoryList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
})
|
||||
|
||||
const { loading, ids, single, multiple, showSearch, total, categoryList, title, open, rules } = toRefs(data);
|
||||
|
||||
const { form, validateForm, resetForm } = useForm(formRef, defaultForm)
|
||||
const { form: queryParams, resetForm: resetQueryForm } = useForm(queryRef, defaultParams)
|
||||
|
||||
getList();
|
||||
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listProductsCategory(queryParams.value).then(response => {
|
||||
categoryList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
resetForm();
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
resetQueryForm();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map(item => item.id)
|
||||
single.value = selection.length!==1
|
||||
multiple.value = !selection.length
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加品类";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const id = row.id || ids.value
|
||||
getProductsCategory(id).then(response => {
|
||||
form.value = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改品类";
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
validateForm().then(() => {
|
||||
if (form.value.id != null) {
|
||||
updateProductsCategory(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
addProductsCategory(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const ids = row.id || ids.value;
|
||||
proxy.$modal.confirm('是否确认删除分类编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delProductsCategory(ids);
|
||||
}).then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download('business/products-category/export', {
|
||||
...queryParams.value
|
||||
}, `products-category_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
</script>
|
||||
@ -1,256 +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="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
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="['business:products-type:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="edit"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['business:products-type:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['business:products-type:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="download"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['business:products-type:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="编码" align="center" prop="code" />
|
||||
<el-table-column label="类型" align="center" prop="name" />
|
||||
<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="['business:products-type:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
icon="delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['business:products-type: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="500px" append-to-body>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="编码" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入分类编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入分类名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { listProductsType, getProductsType, delProductsType, addProductsType, updateProductsType } from "@/api/product/productsType";
|
||||
|
||||
import useForm from '@/hooks/useForm.js';
|
||||
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
name: null,
|
||||
code: null
|
||||
}
|
||||
|
||||
const defaultParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null
|
||||
}
|
||||
|
||||
const formRef = ref(null);
|
||||
const queryRef = ref(null);
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const data = reactive({
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 分类表格数据
|
||||
typeList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
})
|
||||
|
||||
const { loading, ids, single, multiple, showSearch, total, typeList, title, open, rules } = toRefs(data);
|
||||
|
||||
const { form, validateForm, resetForm } = useForm(formRef, defaultForm)
|
||||
const { form: queryParams, resetForm: resetQueryForm } = useForm(queryRef, defaultParams)
|
||||
|
||||
getList();
|
||||
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listProductsType(queryParams.value).then(response => {
|
||||
typeList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
resetForm();
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
resetQueryForm();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map(item => item.id)
|
||||
single.value = selection.length!==1
|
||||
multiple.value = !selection.length
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加类型";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const id = row.id || ids.value
|
||||
getProductsType(id).then(response => {
|
||||
form.value = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改类型";
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
validateForm().then(() => {
|
||||
if (form.value.id != null) {
|
||||
updateProductsType(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
addProductsType(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const ids = row.id || ids.value;
|
||||
proxy.$modal.confirm('是否确认删除分类编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delProductsType(ids);
|
||||
}).then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download('system/products-type/export', {
|
||||
...queryParams.value
|
||||
}, `products-type_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
</script>
|
||||
@ -1,486 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="110px">
|
||||
<el-form-item label="供应商名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入供应商名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="供应商法人类型" prop="corporationType">
|
||||
<el-select
|
||||
v-model="queryParams.corporationType"
|
||||
placeholder="请选择类型"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
style="width: 200px;"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in supplier_corporation_type"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.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="['business:supplier:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="edit"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['business:supplier:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['business:supplier:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="download"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['business:supplier:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="供应商名称" align="center" prop="name" />
|
||||
<el-table-column label="供应商评分" align="center" prop="score" />
|
||||
<el-table-column label="供应商规模" align="center" prop="scale" />
|
||||
<el-table-column label="供应商经营开始时间" align="center" prop="startTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="供应商法人类型" align="center" prop="corporationType" />
|
||||
<el-table-column label="供应商股票名称" align="center" prop="stockName" />
|
||||
<el-table-column label="是否小微企业" align="center" prop="smallVendors" />
|
||||
<el-table-column label="供应商注册号" align="center" prop="registNo" />
|
||||
<el-table-column label="供应商注册资本" align="center" prop="registCapital" />
|
||||
<el-table-column label="供应商登记机关" align="center" prop="registAuthority" />
|
||||
<el-table-column label="营业执照" align="center" prop="businessLicense" />
|
||||
<el-table-column label="营业地址" align="center" prop="businessAddress" />
|
||||
<el-table-column label="供应商注册行业" align="center" prop="registSector" />
|
||||
<el-table-column label="供应商核准时间" align="center" prop="approvalTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.approvalTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="中标信息" align="center" prop="winBidInfo" />
|
||||
<el-table-column label="合同信息" align="center" prop="contractInfo" />
|
||||
<el-table-column label="合同有效期" align="center" prop="expirationTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.expirationTime, '{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="['business:supplier:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
icon="delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['business:supplier: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="1000px" append-to-body>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="160px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入供应商名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商评分" prop="score">
|
||||
<el-input v-model="form.score" placeholder="请输入供应商评分" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商规模" prop="scale">
|
||||
<el-select
|
||||
v-model="form.scale"
|
||||
placeholder="请选择规模"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in supplier_scale"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商经营开始时间" prop="startTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.startTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择供应商经营开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商股票名称" prop="stockName">
|
||||
<el-input v-model="form.stockName" placeholder="请输入供应商股票名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商法人类型" prop="corporationType">
|
||||
<el-select
|
||||
v-model="form.corporationType"
|
||||
placeholder="请选择类型"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in supplier_corporation_type"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否小商企业" prop="smallVendors">
|
||||
<el-select
|
||||
v-model="form.smallVendors"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in [{ value: 0, label: '否' }, { value: 1, label: '是' }]"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商注册号" prop="registNo">
|
||||
<el-input v-model="form.registNo" placeholder="请输入供应商注册号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="股票曾用名" prop="stockNameUsed">
|
||||
<el-input v-model="form.stockNameUsed" placeholder="请输入供应商股票曾用名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商注册资本" prop="registCapital">
|
||||
<el-input v-model="form.registCapital" placeholder="请输入供应商注册资本" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商登记机关" prop="registAuthority">
|
||||
<el-input v-model="form.registAuthority" placeholder="请输入供应商登记机关" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商注册行业" prop="registSector">
|
||||
<el-input v-model="form.registSector" placeholder="请输入供应商注册行业" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商核准时间" prop="approvalTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.approvalTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择供应商核准时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="中标信息" prop="winBidInfo">
|
||||
<el-input v-model="form.winBidInfo" placeholder="请输入中标信息" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="合同信息" prop="contractInfo">
|
||||
<el-input v-model="form.contractInfo" placeholder="请输入合同信息" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="合同有效期" prop="expirationTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.expirationTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择合同有效期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="营业执照" prop="businessLicense">
|
||||
<el-input v-model="form.businessLicense" placeholder="请输入营业执照" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="营业地址" prop="businessAddress">
|
||||
<el-input v-model="form.businessAddress" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="附件是否上传" prop="attachment">
|
||||
<el-select
|
||||
v-model="form.attachment"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
@change="attachmentChanged"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in [{ value: 0, label: '否' }, { value: 1, label: '是' }]"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-show="form.attachment">
|
||||
<el-form-item label="执照相片" prop="licenseImg">
|
||||
<image-upload
|
||||
v-model="form.licenseImg"
|
||||
:limit="1"
|
||||
>
|
||||
</image-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { listSupplierRecord, getSupplierRecord, delSupplierRecord, addSupplierRecord, updateSupplierRecord } from "@/api/supplier/record";
|
||||
import ImageUpload from "@/components/ImageUpload";
|
||||
|
||||
import useForm from '@/hooks/useForm.js';
|
||||
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
name: null,
|
||||
score: null,
|
||||
scale: null,
|
||||
stockName: null,
|
||||
stockNameUsed: null,
|
||||
startTime: null,
|
||||
corporationType: null,
|
||||
smallVendors: null,
|
||||
registNo: null,
|
||||
registCapital: null,
|
||||
registAuthority: null,
|
||||
registSector: null,
|
||||
approvalTime: null,
|
||||
winBidInfo: null,
|
||||
contractInfo: null,
|
||||
expirationTime: null,
|
||||
businessLicense: null,
|
||||
businessAddress: null,
|
||||
attachment: 0,
|
||||
licenseImg: null,
|
||||
}
|
||||
|
||||
const defaultParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
corporationType: null
|
||||
}
|
||||
|
||||
const formRef = ref(null);
|
||||
const queryRef = ref(null);
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const data = reactive({
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 分类表格数据
|
||||
recordList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
})
|
||||
|
||||
const { loading, ids, single, multiple, showSearch, total, recordList, title, open, rules } = toRefs(data);
|
||||
|
||||
const { form, validateForm, resetForm } = useForm(formRef, defaultForm)
|
||||
const { form: queryParams, resetForm: resetQueryForm } = useForm(queryRef, defaultParams)
|
||||
|
||||
const { supplier_scale, supplier_corporation_type } = proxy.useDict('supplier_scale', 'supplier_corporation_type')
|
||||
|
||||
getList();
|
||||
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listSupplierRecord(queryParams.value).then(response => {
|
||||
recordList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function attachmentChanged (value) {
|
||||
if (value) return;
|
||||
form.value.licenseImg = null;
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
resetForm();
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
resetQueryForm();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map(item => item.id)
|
||||
single.value = selection.length!==1
|
||||
multiple.value = !selection.length
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加档案";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const id = row.id || ids.value
|
||||
getSupplierRecord(id).then(response => {
|
||||
form.value = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改档案";
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
validateForm().then(() => {
|
||||
if (form.value.id != null) {
|
||||
updateSupplierRecord(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
addSupplierRecord(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const ids = row.id || ids.value;
|
||||
proxy.$modal.confirm('是否确认删除分类编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delSupplierRecord(ids);
|
||||
}).then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download('business/supplier/export', {
|
||||
...queryParams.value
|
||||
}, `supplier-record_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue