功能:新增业务基础资料页面
This commit is contained in:
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form ref="queryRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="客户ID" prop="customerId">
|
||||
<el-input-number v-model="queryParams.customerId" :min="1" :step="1" step-strictly controls-position="right" placeholder="请输入客户ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="现场编码" prop="siteCode">
|
||||
<el-input v-model="queryParams.siteCode" placeholder="请输入现场编码" clearable maxlength="64" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="现场名称" prop="siteName">
|
||||
<el-input v-model="queryParams.siteName" placeholder="请输入现场名称" clearable maxlength="100" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 160px">
|
||||
<el-option v-for="dict in sys_normal_disable" :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" v-hasPermi="['master:site:list']">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery" v-hasPermi="['master:site:list']">重置</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="['master:site:add']">新增</el-button></el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-if="proxy.$auth.hasPermiAnd(['master:site:query', 'master:site:edit'])"
|
||||
type="success" plain icon="Edit" :disabled="single || detailLoading" :loading="detailLoading"
|
||||
@click="handleUpdate()" v-hasPermi="['master:site:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5"><el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['master:site:remove']">删除</el-button></el-col>
|
||||
<el-col :span="1.5"><el-button type="warning" plain icon="User" :disabled="single" @click="handleAssign()" v-hasPermi="['master:site:assign']">分配用户</el-button></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-alert v-if="loadError" :title="loadError" type="error" :closable="false" show-icon class="mb8" />
|
||||
<el-table v-loading="loading" empty-text="暂无数据" :data="siteList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" :selectable="isRowSelectable" width="55" align="center" />
|
||||
<el-table-column label="现场ID" prop="siteId" align="center" />
|
||||
<el-table-column label="客户ID" prop="customerId" align="center" />
|
||||
<el-table-column label="现场编码" prop="siteCode" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="现场名称" prop="siteName" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="地址" prop="address" align="center" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="状态" prop="status" align="center" width="100">
|
||||
<template #default="scope"><dict-tag :options="sys_normal_disable" :value="scope.row.status" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" prop="createTime" align="center" width="180">
|
||||
<template #default="scope"><span>{{ parseTime(scope.row.createTime) }}</span></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="260" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="User" @click="handleAssign(scope.row)" v-hasPermi="['master:site:assign']">分配</el-button>
|
||||
<el-button
|
||||
v-if="proxy.$auth.hasPermiAnd(['master:site:query', 'master:site:edit'])"
|
||||
link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['master:site:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.canRemove === true"
|
||||
link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['master:site: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 v-model="open" :title="title" width="min(560px, 92vw)" append-to-body>
|
||||
<el-alert v-if="formError" :title="formError" type="error" :closable="false" show-icon class="mb8" />
|
||||
<el-form ref="siteRef" :model="form" :rules="rules" label-width="90px">
|
||||
<el-form-item label="客户ID" prop="customerId">
|
||||
<el-input-number v-model="form.customerId" :min="1" :step="1" step-strictly controls-position="right" />
|
||||
</el-form-item>
|
||||
<el-form-item label="现场编码" prop="siteCode">
|
||||
<el-input v-model="form.siteCode" placeholder="请输入现场编码" maxlength="64" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="现场名称" prop="siteName">
|
||||
<el-input v-model="form.siteName" placeholder="请输入现场名称" maxlength="100" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="address">
|
||||
<el-input v-model="form.address" type="textarea" :rows="2" maxlength="500" show-word-limit placeholder="请输入地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button v-if="!form.siteId" type="primary" :loading="submitLoading" @click="submitCreate" v-hasPermi="['master:site:add']">确 定</el-button>
|
||||
<el-button v-else type="primary" :loading="submitLoading" @click="submitUpdate" v-hasPermi="['master:site:edit']">确 定</el-button>
|
||||
<el-button :disabled="submitLoading" @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<business-user-assign-dialog ref="assignDialogRef" @ok="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Site">
|
||||
import BusinessUserAssignDialog from "@/components/BusinessUserAssignDialog";
|
||||
import { addSite, delSite, getSite, listSite, updateSite } from "@/api/master/site";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
|
||||
const siteList = ref([]);
|
||||
const ids = ref([]);
|
||||
const selectedRows = ref([]);
|
||||
const assignDialogRef = ref();
|
||||
const loading = ref(false);
|
||||
const detailLoading = ref(false);
|
||||
const submitLoading = ref(false);
|
||||
const loadError = ref("");
|
||||
const formError = ref("");
|
||||
const open = ref(false);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const title = ref("");
|
||||
|
||||
function validateRequiredText(rule, value, callback) {
|
||||
const labels = { siteCode: "现场编码", siteName: "现场名称" };
|
||||
if (typeof value !== "string" || value.trim() === "") {
|
||||
callback(new Error(`${labels[rule.field]}不能为空`));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
}
|
||||
function validatePositiveInteger(rule, value, callback) {
|
||||
if (!Number.isInteger(value) || value <= 0) {
|
||||
callback(new Error("客户ID必须为正整数"));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
}
|
||||
|
||||
const data = reactive({
|
||||
form: {},
|
||||
queryParams: { pageNum: 1, pageSize: 10, customerId: undefined, siteCode: undefined, siteName: undefined, status: undefined },
|
||||
rules: {
|
||||
customerId: [{ required: true, validator: validatePositiveInteger, trigger: "change" }],
|
||||
siteCode: [{ required: true, validator: validateRequiredText, trigger: "blur" }],
|
||||
siteName: [{ required: true, validator: validateRequiredText, trigger: "blur" }],
|
||||
status: [{ required: true, message: "请选择状态", trigger: "change" }]
|
||||
}
|
||||
});
|
||||
const { form, queryParams, rules } = toRefs(data);
|
||||
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
loadError.value = "";
|
||||
listSite(queryParams.value).then((response) => {
|
||||
siteList.value = response.rows;
|
||||
total.value = response.total;
|
||||
}).catch(() => {
|
||||
siteList.value = [];
|
||||
total.value = 0;
|
||||
loadError.value = "客户现场列表加载失败,请稍后重试";
|
||||
}).finally(() => { loading.value = false; });
|
||||
}
|
||||
function reset() {
|
||||
formError.value = "";
|
||||
form.value = { siteId: undefined, customerId: undefined, siteCode: "", siteName: "", address: "", status: "0", remark: "" };
|
||||
proxy.resetForm("siteRef");
|
||||
}
|
||||
function cancel() { open.value = false; reset(); }
|
||||
function handleQuery() { queryParams.value.pageNum = 1; getList(); }
|
||||
function resetQuery() { proxy.resetForm("queryRef"); handleQuery(); }
|
||||
function isRowSelectable(row) {
|
||||
return row.canRemove === true;
|
||||
}
|
||||
function handleSelectionChange(selection) {
|
||||
selectedRows.value = selection.filter((item) => item.canRemove === true);
|
||||
ids.value = selection
|
||||
.filter((item) => item.canRemove === true)
|
||||
.map((item) => item.siteId);
|
||||
single.value = ids.value.length !== 1;
|
||||
multiple.value = ids.value.length === 0;
|
||||
}
|
||||
function handleAdd() { reset(); title.value = "新增客户现场"; open.value = true; }
|
||||
function handleUpdate(row = {}) {
|
||||
reset();
|
||||
const siteId = row.siteId || ids.value[0];
|
||||
detailLoading.value = true;
|
||||
getSite(siteId).then((response) => {
|
||||
const detail = response.data;
|
||||
form.value = {
|
||||
siteId: detail.siteId,
|
||||
customerId: detail.customerId,
|
||||
siteCode: detail.siteCode,
|
||||
siteName: detail.siteName,
|
||||
address: detail.address || "",
|
||||
status: detail.status,
|
||||
remark: detail.remark || ""
|
||||
};
|
||||
title.value = "修改客户现场";
|
||||
open.value = true;
|
||||
}).catch(() => {
|
||||
loadError.value = "客户现场详情加载失败,请稍后重试";
|
||||
}).finally(() => { detailLoading.value = false; });
|
||||
}
|
||||
function handleAssign(row = {}) {
|
||||
if (!row.siteId) row = selectedRows.value[0];
|
||||
if (!row) return;
|
||||
assignDialogRef.value.show({
|
||||
resourceType: "site",
|
||||
resourceId: row.siteId,
|
||||
resourceName: row.siteName
|
||||
});
|
||||
}
|
||||
function afterSubmit(response) {
|
||||
proxy.$modal.msgSuccess(response.msg || "操作成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
}
|
||||
function submitCreate() {
|
||||
proxy.$refs.siteRef.validate((valid) => {
|
||||
if (!valid) return;
|
||||
submitLoading.value = true;
|
||||
formError.value = "";
|
||||
addSite({
|
||||
customerId: form.value.customerId,
|
||||
siteCode: form.value.siteCode.trim(),
|
||||
siteName: form.value.siteName.trim(),
|
||||
address: form.value.address?.trim() || undefined,
|
||||
status: form.value.status,
|
||||
remark: form.value.remark?.trim() || undefined
|
||||
}).then(afterSubmit).catch(() => {
|
||||
formError.value = "新增失败,请根据提示修正后重试";
|
||||
}).finally(() => { submitLoading.value = false; });
|
||||
});
|
||||
}
|
||||
function submitUpdate() {
|
||||
proxy.$refs.siteRef.validate((valid) => {
|
||||
if (!valid) return;
|
||||
submitLoading.value = true;
|
||||
formError.value = "";
|
||||
updateSite({
|
||||
siteId: form.value.siteId,
|
||||
customerId: form.value.customerId,
|
||||
siteCode: form.value.siteCode.trim(),
|
||||
siteName: form.value.siteName.trim(),
|
||||
address: form.value.address?.trim() || undefined,
|
||||
status: form.value.status,
|
||||
remark: form.value.remark?.trim() || undefined
|
||||
}).then(afterSubmit).catch(() => {
|
||||
formError.value = "修改失败,请根据提示修正后重试";
|
||||
}).finally(() => { submitLoading.value = false; });
|
||||
});
|
||||
}
|
||||
function handleDelete(row) {
|
||||
const targetIds = row?.siteId ? (row.canRemove === true ? [row.siteId] : []) : ids.value;
|
||||
if (!targetIds.length) { proxy.$modal.msgWarning("请选择允许删除的客户现场"); return; }
|
||||
proxy.$modal.confirm(`是否确认删除现场编号为“${targetIds.join(",")}”的数据项?`).then(() =>
|
||||
delSite(targetIds.join(","))
|
||||
).then(() => { proxy.$modal.msgSuccess("删除成功"); getList(); }).catch((error) => {
|
||||
if (error !== "cancel" && error !== "close") loadError.value = "客户现场删除失败,请稍后重试";
|
||||
});
|
||||
}
|
||||
|
||||
getList();
|
||||
</script>
|
||||
Reference in New Issue
Block a user