客户管理

src/pages/cst/customer/Customer.vue

@@ -6,14 +6,37 @@
     :paging="paging">
     <template #searchFormItem="{searchForm}">
       <ElFormItem label="身份类型">
-        <el-select v-model="searchForm.identityCategory" placeholder="身份类型">
+        <ElSelect v-model="searchForm.identityCategory" placeholder="身份类型">
-          <el-option v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value"/>
+          <ElOption v-for="item in identityCategory" :key="item.val" :label="item.txt" :value="item.val"/>
-        </el-select>
+        </ElSelect>
       </ElFormItem>
       <ElFormItem label="结算方式">
-        <el-select v-model="searchForm.settlementWay" placeholder="结算方式">
+        <ElSelect v-model="searchForm.settlementWay" placeholder="结算方式">
-          <el-option v-for="item in payList" :key="item.value" :label="item.label" :value="item.value"/>
+          <ElOption v-for="item in settlementWay" :key="item.val" :label="item.txt" :value="item.val"/>
-        </el-select>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="账号">
+        <ElInput v-model="searchForm.username" placeholder="账号"/>
+      </ElFormItem>
+      <ElFormItem label="姓名">
+        <ElInput v-model="searchForm.nickname" placeholder="姓名"/>
+      </ElFormItem>
+      <ElFormItem label="企业名称">
+        <ElInput v-model="searchForm.orgId" placeholder="企业名称"/>
+      </ElFormItem>
+      <ElFormItem label="联系电话">
+        <ElInput v-model="searchForm.phone" placeholder="联系电话"/>
+      </ElFormItem>
+    </template>
+    <template #simpleSearchFormItem="{searchForm}">
+      <ElFormItem>
+        <ElInput v-model="searchForm.orgId" placeholder="企业名称"/>
+      </ElFormItem>
+      <ElFormItem>
+        <ElInput v-model="searchForm.nickname" placeholder="姓名"/>
+      </ElFormItem>
+      <ElFormItem>
+        <ElInput v-model="searchForm.phone" placeholder="联系电话"/>
       </ElFormItem>
     </template>
     <template #columns>
@@ -29,9 +52,9 @@
         </template>
       </ElTableColumn>
       <ElTableColumn label="联系电话" prop="phone"/>
-      <ElTableColumn label="创建时间" prop="regdate"/>
+      <ElTableColumn label="注册时间" prop="regdate"/>
     </template>
-    <CustomerForm ref="customerForm" @edit-succ="research"/>
+    <CustomerForm ref="customerForm" :research="research"/>
   </FormPage>
 </template>
 
@@ -44,6 +67,10 @@ import type {
   ToolType,
 } from '@/components/page/a-page-type.ts'
 import type { ComponentExposed } from 'vue-component-type-helpers'
+import {
+  identityCategory,
+  settlementWay,
+} from '@/pages/cst/customer/constants.ts'
 
 const payList = [
   {

src/pages/cst/customer/CustomerForm.vue

@@ -1,170 +1,103 @@
 <template>
-  <ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
+  <AFormPanel
-    <ElForm :model="formData" :rules="rules" class="form-panel" label-width="auto" ref="customerForm">
+    ref="formPanel"
-      <!-- <ElFormItem label-width="90" label="Id" prop="id">
+    :details-loader="detailsLoader"
-        <ElInput
+    :do-submit="doSubmit"
-          v-model="formData.id"
+    :rules="rules"
-          :disabled="status === 'view'"
+    :title="status === 'add' ? '新建客户' : '修改客户'">
-          placeholder="Id"/>
+    <template #default="{formData}">
+      <div class="form-items">
+        <ElFormItem label="身份类型" prop="identityCategory">
+          <ElSelect v-model="formData.identityCategory" :disabled="status === 'view'" placeholder="身份类型">
+            <ElOption v-for="item in identityCategory" :key="item.val" :label="item.txt" :value="item.val"/>
+          </ElSelect>
         </ElFormItem>
-       <ElFormItem label-width="90" label="用户" prop="userId">
+        <ElFormItem label="客户姓名" prop="customerName">
-        <ElInput
+          <ElInput v-model="formData.customerName" :disabled="status === 'view'" placeholder="客户姓名"/>
-          v-model="formData.userId"
-          :disabled="status === 'view'"
-          placeholder="用户"/>
-      </ElFormItem> -->
-      <ElFormItem label-width="90" label="身份类型" prop="identityCategory">
-        <el-select v-model="formData.identityCategory" :disabled="status === 'view'" placeholder="身份类型" >
-          <el-option v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
         </ElFormItem>
-      <ElFormItem label-width="90" label="客户姓名" prop="customerName">
+        <ElFormItem label="联系电话" prop="phone">
-        <ElInput v-model="formData.customerName" :disabled="status === 'view'" placeholder="客户姓名" />
+          <ElInput v-model="formData.phone" :disabled="status === 'view'" placeholder="联系电话"/>
         </ElFormItem>
-      <ElFormItem label-width="90" label="客户联系电话" prop="phone">
+        <ElFormItem label="结算方式" prop="settlementWay">
-        <ElInput v-model="formData.phone" :disabled="status === 'view'" placeholder="客户联系电话" />
+          <ElSelect v-model="formData.settlementWay" :disabled="status === 'view'" placeholder="结算方式">
+            <ElOption v-for="item in settlementWay" :key="item.val" :label="item.txt" :value="item.val"/>
+          </ElSelect>
         </ElFormItem>
-      <ElFormItem label-width="90" label="结算方式" prop="settlementWay">
+      </div>
-        <el-select v-model="formData.settlementWay" :disabled="status === 'view'" placeholder="结算方式" style="width: 240px">
-          <el-option v-for="item in payList" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </ElFormItem>
-      <!-- <ElFormItem label-width="90" label="是否管理员" prop="manager">
-        <ElInput
-          v-model="formData.manager"
-          :disabled="status === 'view'"
-          placeholder="是否管理员"/>
-      </ElFormItem> -->
-    </ElForm>
-    <template #footer>
-      <ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
-      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
     </template>
-  </ElDialog>
+  </AFormPanel>
 </template>
 
 <script lang="ts" setup>
 import CustomerApi from '@/pages/cst/customer/customer-api.ts'
 import Strings from '@/common/utils/strings.ts'
-import FormUtil from '@/common/utils/formUtil.ts'
+import { type FormRules } from 'element-plus'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
 import {
-  ElMessage,
+  identityCategory,
-  type FormInstance,
+  settlementWay,
-  type FormRules,
+} from '@/pages/cst/customer/constants.ts'
-} from 'element-plus'
 
-const emits = defineEmits(["editSucc"]);
-const showDialog = ref(false);
-const submiting = ref(false);
-const status = ref<"add" | "view" | "modify">("add");
 
-const customerFormIns = useTemplateRef<FormInstance>("customerForm");
+const props = withDefaults(defineProps<{
-
+  research?: () => void
-const formData = ref<CustomerTypes.SearchCustomerResult>({});
+}>(), {
+  research: () => {
+  },
+})
+const formPanelIns = useTemplateRef<InstanceType<typeof AFormPanel>>('formPanel')
+const status = ref<'add' | 'view' | 'modify'>('add')
 const rules = reactive<FormRules<CustomerTypes.SearchCustomerResult>>({
-  id: [{ required: true, message: "请填写Id", trigger: "blur" }],
+  id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
-  userId: [{ required: true, message: "请填写用户", trigger: "blur" }],
+  userId: [ {required: true, message: '请填写用户', trigger: 'blur'} ],
-  identityCategory: [{ required: true, message: "请填写身份类型", trigger: "blur" }],
+  identityCategory: [ {required: true, message: '请填写身份类型', trigger: 'blur'} ],
-  orgId: [{ required: true, message: "请填写组织信息", trigger: "blur" }],
+  orgId: [ {required: true, message: '请填写组织信息', trigger: 'blur'} ],
-  customerName: [{ required: true, message: "请填写客户姓名", trigger: "blur" }],
+  customerName: [ {required: true, message: '请填写客户姓名', trigger: 'blur'} ],
-  phone: [{ required: true, message: "请填写客户联系电话", trigger: "blur" }],
+  phone: [ {required: true, message: '请填写客户联系电话', trigger: 'blur'} ],
-  settlementWay: [{ required: true, message: "请填写结算方式", trigger: "blur" }],
+  settlementWay: [ {required: true, message: '请填写结算方式', trigger: 'blur'} ],
-  manager: [{ required: true, message: "请填写是否管理员", trigger: "blur" }],
+  manager: [ {required: true, message: '请填写是否管理员', trigger: 'blur'} ],
-  creatorId: [{ required: true, message: "请填写创建人", trigger: "blur" }],
+  creatorId: [ {required: true, message: '请填写创建人', trigger: 'blur'} ],
-  modifierId: [{ required: true, message: "请填写修改人", trigger: "blur" }],
+  modifierId: [ {required: true, message: '请填写修改人', trigger: 'blur'} ],
-  createTime: [{ required: true, message: "请填写创建时间", trigger: "blur" }],
+  createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
-  modifyTime: [{ required: true, message: "请填写修改时间", trigger: "blur" }],
+  modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
-  deleted: [{ required: true, message: "请填写是否删除", trigger: "blur" }],
+  deleted: [ {required: true, message: '请填写是否删除', trigger: 'blur'} ],
-});
+})
 
-const payList = [
+function detailsLoader(id?: string) {
-  {
+  if (Strings.isBlank(id)) {
-    value: "YueJie",
+    status.value = 'add'
-    label: "月结",
+    return Promise.resolve()
-  },
-  {
-    value: "YuE",
-    label: "余额",
-  },
-  {
-    value: "XianFu",
-    label: "现付",
-  },
-];
-
-const bizList = [
-  {
-    value: "ChanFei",
-    label: "产废方",
-  },
-  {
-    value: "YunShu",
-    label: "运输方",
-  },
-  {
-    value: "XiaoNa",
-    label: "消纳方",
-  },
-  {
-    value: "CaiGou",
-    label: "采购方",
-  },
-  {
-    value: "SiJi",
-    label: "司机",
-  }
-]
-
-function dialogCloseHandler() {
-  formData.value = {};
-}
-
-function submitHandler() {
-  if (status.value === "view") return;
-  submiting.value = true;
-  console.log(customerFormIns.value!.validate(), "customerFormIns");
-  if (formData.value.id != null) {
-    FormUtil.submit(customerFormIns, () => CustomerApi.modify(formData.value))
-      .then(() => {
-        ElMessage.success("修改成功");
-        emits("editSucc");
-        showDialog.value = false;
-      })
-      .finally(() => {
-        submiting.value = false;
-      });
   } else {
-    FormUtil.submit(customerFormIns, () => CustomerApi.add(formData.value))
+
-      .then(() => {
+    status.value = 'modify'
-        ElMessage.success("添加成功");
+    return CustomerApi
-        emits("editSucc");
+      .detail(id!)
-        showDialog.value = false;
+      .then(res => res.data)
-      })
-      .finally(() => {
-        submiting.value = false;
-      });
   }
 }
 
+function doSubmit(data: CustomerTypes.SearchCustomerResult) {
+  if (status.value === 'add') {
+    return CustomerApi.add(data)
+      .then(props.research)
+  } else if (status.value === 'modify') {
+    return CustomerApi.modify(data)
+      .then(props.research)
+  }
+}
+
+
 defineExpose({
-  open(data: CustomerTypes.SearchCustomerResult = {}) {
+  open(data?: CustomerTypes.SearchCustomerResult) {
-    showDialog.value = true;
+    formPanelIns.value?.open(data?.id)
-    if (!Strings.isBlank(data.id)) {
-      status.value = "modify";
-      CustomerApi.detail(data.id!).then((res) => {
-        formData.value = res.data;
-        console.log(formData.value);
-      });
-    } else {
-      status.value = "add";
-      formData.value = data;
-    }
   },
-});
+})
 </script>
 
 <style lang="stylus" scoped>
-.form-panel {
+.form-items {
-  padding 20px
+  grid-template-columns: 1fr;
 }
+
 </style>
+

src/pages/cst/customer/constants.ts

@@ -0,0 +1,42 @@
+import { createEnum } from '@/common/utils/enums.ts'
+
+const settlementWayList = [
+  {
+    val: 'YueJie',
+    txt: '月结',
+  },
+  {
+    val: 'YuE',
+    txt: '余额',
+  },
+  {
+    val: 'XianFu',
+    txt: '现付',
+  },
+] as const
+
+const identityCategoryList = [
+  {
+    val: 'ChanFei',
+    txt: '产废方',
+  },
+  {
+    val: 'YunShu',
+    txt: '运输方',
+  },
+  {
+    val: 'XiaoNa',
+    txt: '消纳方',
+  },
+  {
+    val: 'CaiGou',
+    txt: '采购方',
+  },
+  {
+    val: 'SiJi',
+    txt: '司机',
+  },
+] as const
+
+export const settlementWay = createEnum(settlementWayList)
+export const identityCategory = createEnum(identityCategoryList)

src/pages/gds/goods-category/constants.ts

@@ -1,6 +1,6 @@
 import { createEnum } from '@/common/utils/enums.ts'
 
-const enums = [
+const bizTypeList = [
   {
     val: 'ZaiShengPin',
     txt: '再生品',
@@ -15,4 +15,4 @@ const enums = [
   },
 ] as const
 
-export const bizType = createEnum(enums)
+export const bizType = createEnum(bizTypeList)