功能：新增业务基础资料页面

2026-07-27 05:27:20 +08:00
parent 246e69f5c8
commit 137b2934f7
8 changed files with 2088 additions and 0 deletions
@@ -0,0 +1,230 @@
+<template>
+  <div class="app-container">
+    <el-form ref="queryRef" :model="queryParams" :inline="true">
+      <el-form-item label="客户编码" prop="customerCode">
+        <el-input v-model="queryParams.customerCode" placeholder="请输入客户编码" clearable maxlength="64" @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="客户名称" prop="customerName">
+        <el-input v-model="queryParams.customerName" 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:customer:list']">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery" v-hasPermi="['master:customer: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:customer:add']">新增</el-button></el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-if="proxy.$auth.hasPermiAnd(['master:customer:query', 'master:customer:edit'])"
+          type="success" plain icon="Edit" :disabled="single || detailLoading" :loading="detailLoading"
+          @click="handleUpdate()" v-hasPermi="['master:customer:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5"><el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['master:customer:remove']">删除</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="customerList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" :selectable="isRowSelectable" width="55" align="center" />
+      <el-table-column label="客户ID" prop="customerId" align="center" />
+      <el-table-column label="客户编码" prop="customerCode" align="center" :show-overflow-tooltip="true" />
+      <el-table-column label="客户名称" prop="customerName" 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" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button
+            v-if="proxy.$auth.hasPermiAnd(['master:customer:query', 'master:customer:edit'])"
+            link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['master:customer:edit']"
+          >修改</el-button>
+          <el-button
+            v-if="scope.row.canRemove === true"
+            link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['master: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 v-model="open" :title="title" width="min(520px, 92vw)" append-to-body>
+      <el-alert v-if="formError" :title="formError" type="error" :closable="false" show-icon class="mb8" />
+      <el-form ref="customerRef" :model="form" :rules="rules" label-width="90px">
+        <el-form-item label="客户编码" prop="customerCode">
+          <el-input v-model="form.customerCode" placeholder="请输入客户编码" maxlength="64" show-word-limit />
+        </el-form-item>
+        <el-form-item label="客户名称" prop="customerName">
+          <el-input v-model="form.customerName" placeholder="请输入客户名称" maxlength="100" show-word-limit />
+        </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.customerId" type="primary" :loading="submitLoading" @click="submitCreate" v-hasPermi="['master:customer:add']">确 定</el-button>
+          <el-button v-else type="primary" :loading="submitLoading" @click="submitUpdate" v-hasPermi="['master:customer:edit']">确 定</el-button>
+          <el-button :disabled="submitLoading" @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Customer">
+import { addCustomer, delCustomer, getCustomer, listCustomer, updateCustomer } from "@/api/master/customer";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+const customerList = ref([]);
+const ids = 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) {
+  if (typeof value !== "string" || value.trim() === "") {
+    callback(new Error(`${rule.field === "customerCode" ? "客户编码" : "客户名称"}不能为空`));
+    return;
+  }
+  callback();
+}
+
+const data = reactive({
+  form: {},
+  queryParams: { pageNum: 1, pageSize: 10, customerCode: undefined, customerName: undefined, status: undefined },
+  rules: {
+    customerCode: [{ required: true, validator: validateRequiredText, trigger: "blur" }],
+    customerName: [{ 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 = "";
+  listCustomer(queryParams.value).then((response) => {
+    customerList.value = response.rows;
+    total.value = response.total;
+  }).catch(() => {
+    customerList.value = [];
+    total.value = 0;
+    loadError.value = "客户列表加载失败，请稍后重试";
+  }).finally(() => { loading.value = false; });
+}
+
+function reset() {
+  formError.value = "";
+  form.value = { customerId: undefined, customerCode: "", customerName: "", status: "0", remark: "" };
+  proxy.resetForm("customerRef");
+}
+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) {
+  ids.value = selection
+    .filter((item) => item.canRemove === true)
+    .map((item) => item.customerId);
+  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 customerId = row.customerId || ids.value[0];
+  detailLoading.value = true;
+  getCustomer(customerId).then((response) => {
+    const detail = response.data;
+    form.value = {
+      customerId: detail.customerId,
+      customerCode: detail.customerCode,
+      customerName: detail.customerName,
+      status: detail.status,
+      remark: detail.remark || ""
+    };
+    title.value = "修改客户";
+    open.value = true;
+  }).catch(() => {
+    loadError.value = "客户详情加载失败，请稍后重试";
+  }).finally(() => { detailLoading.value = false; });
+}
+
+function afterSubmit(response) {
+  proxy.$modal.msgSuccess(response.msg || "操作成功");
+  open.value = false;
+  getList();
+}
+function submitCreate() {
+  proxy.$refs.customerRef.validate((valid) => {
+    if (!valid) return;
+    submitLoading.value = true;
+    formError.value = "";
+    addCustomer({
+      customerCode: form.value.customerCode.trim(),
+      customerName: form.value.customerName.trim(),
+      status: form.value.status,
+      remark: form.value.remark?.trim() || undefined
+    }).then(afterSubmit).catch(() => {
+      formError.value = "新增失败，请根据提示修正后重试";
+    }).finally(() => { submitLoading.value = false; });
+  });
+}
+function submitUpdate() {
+  proxy.$refs.customerRef.validate((valid) => {
+    if (!valid) return;
+    submitLoading.value = true;
+    formError.value = "";
+    updateCustomer({
+      customerId: form.value.customerId,
+      customerCode: form.value.customerCode.trim(),
+      customerName: form.value.customerName.trim(),
+      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?.customerId ? (row.canRemove === true ? [row.customerId] : []) : ids.value;
+  if (!targetIds.length) { proxy.$modal.msgWarning("请选择允许删除的客户"); return; }
+  proxy.$modal.confirm(`是否确认删除客户编号为“${targetIds.join(",")}”的数据项？`).then(() =>
+    delCustomer(targetIds.join(","))
+  ).then(() => { proxy.$modal.msgSuccess("删除成功"); getList(); }).catch((error) => {
+    if (error !== "cancel" && error !== "close") loadError.value = "客户删除失败，请稍后重试";
+  });
+}
+
+getList();
+</script>