客户档案-页面调整/字段调整

src/views/cuspCode/CustomerProfile/CuspCustomerProfile.data.ts

@@ -147,21 +147,30 @@ export const searchFormSchema: FormSchema[] = [
 	{
       label: "国家(country)",
       field: "country",
-      component: 'Input',
+      component: 'JDictSelectTag',
+      componentProps:{
+          dictCode:"country"
+      },
+      labelWidth: 150,
       //colProps: {span: 6},
  	},
    {
     label: "优先级(priority)",
     field: "priority",
     component: 'JSelectMultiple',
+    labelWidth: 150,
     componentProps:{
-    },
+      dictCode:"priority"
+   },
     //colProps: {span: 6},
  },
  {
     label: "中间人(intermediator)",
     field: "intermediator",
-    component: 'Input',
+    component: 'JDictSelectTag',
+    componentProps:{
+        dictCode:"intermediator"
+     },
     labelWidth: 150,
     //colProps: {span: 6},
   },
@@ -171,6 +180,7 @@ export const searchFormSchema: FormSchema[] = [
       component: 'JSelectMultiple',
       labelWidth: 180,
       componentProps:{
+          dictCode:"payment_terms"
       },
       //colProps: {span: 6},
  	},
@@ -180,129 +190,183 @@ export const searchFormSchema: FormSchema[] = [
 //表单数据
 export const formSchema: FormSchema[] = [
   {
-    label: '状态(1-启用,0-停用)',
-    field: 'status',
-    component: 'InputNumber',
-  },
-  {
-    label: '编码',
+    label: '编码(code)',
     field: 'code',
     component: 'Input',
+    colProps: {span: 12},
+    labelWidth: 200,
   },
   {
-    label: '名称',
+    label: '名称(name)',
     field: 'name',
     component: 'Input',
+    colProps: {span: 12},
+    labelWidth: 200,
   },
   {
-    label: '简称',
+    label: '简称(abbreviation)',
     field: 'abbreviation',
     component: 'Input',
+    labelWidth: 200,
+    colProps: {span: 12},
   },
   {
-    label: '曾用名',
+    label: '曾用名(nameUsedBefore)',
     field: 'nameUsedBefore',
     component: 'Input',
+    labelWidth: 200,
+    colProps: {span: 12},
   },
   {
-    label: '税号',
+    label: '税号(dutyParagraph)',
     field: 'dutyParagraph',
     component: 'Input',
+    labelWidth: 200,
+    colProps: {span: 12},
   },
   {
-    label: '法人',
+    label: '法人(legalPerson)',
     field: 'legalPerson',
     component: 'Input',
+    labelWidth: 200,
+    colProps: {span: 12},
   },
   {
-    label: '联系人',
+    label: '联系人(contacts)',
     field: 'contacts',
     component: 'Input',
+    labelWidth: 200,
+    colProps: {span: 12},
   },
   {
-    label: '联系电话',
+    label: '联系电话(phone)',
     field: 'phone',
     component: 'Input',
+    labelWidth: 200,
+    colProps: {span: 12},
   },
   {
-    label: '邮箱',
+    label: '邮箱(email)',
     field: 'email',
     component: 'Input',
+    labelWidth: 200,
+    colProps: {span: 12},
   },
   {
-    label: '注册地址',
+    label: '注册地址(registerAddress)',
     field: 'registerAddress',
     component: 'Input',
+    labelWidth: 200,
+    colProps: {span: 12},
   },
   {
-    label: '办公地址',
+    label: '办公地址(officeAddress)',
     field: 'officeAddress',
     component: 'Input',
+    labelWidth: 200,
+    colProps: {span: 12},
   },
   {
-    label: '发票地址',
+    label: '发票地址(invoiceAddress)',
     field: 'invoiceAddress',
+    colProps: {span: 12},
+    labelWidth: 200,
     component: 'Input',
   },
   {
-    label: '币种',
+    label: '币种(currency)',
     field: 'currency',
-    component: 'Input',
+    colProps: {span: 12},
+    labelWidth: 200,
+    component: 'JDictSelectTag',
+    componentProps:{
+      dictCode:"currency"
+   },
   },
   {
-    label: '国家',
+    label: '国家(country)',
     field: 'country',
-    component: 'Input',
+    colProps: {span: 12},
+    labelWidth: 200,
+    component: 'JDictSelectTag',
+    componentProps:{
+      dictCode:"country"
+   },
   },
   {
-    label: '付款条件',
+    label: '付款条件(paymentTerms)',
     field: 'paymentTerms',
+    colProps: {span: 12},
+    labelWidth: 200,
     component: 'JDictSelectTag',
     componentProps:{
-        dictCode:""
+        dictCode:"payment_terms"
      },
   },
   {
-    label: '信用额度',
+    label: '信用额度(creditLimit)',
     field: 'creditLimit',
+    labelWidth: 200,
+    colProps: {span: 12},
     component: 'InputNumber',
   },
   {
-    label: '折扣',
+    label: '折扣(discount)',
     field: 'discount',
+    colProps: {span: 12},
+    labelWidth: 200,
     component: 'InputNumber',
   },
   {
-    label: '佣金',
+    label: '佣金(commission)',
     field: 'commission',
+    colProps: {span: 12},
+    labelWidth: 200,
     component: 'InputNumber',
   },
   {
-    label: '中间人',
+    label: '中间人(intermediator)',
     field: 'intermediator',
-    component: 'Input',
+    colProps: {span: 12},
+    labelWidth: 200,
+    component: 'JDictSelectTag',
+    componentProps:{
+        dictCode:"intermediator"
+     },
   },
   {
-    label: '中间人佣金',
+    label: '中间人佣金(intermediator commission)',
     field: 'intermediatorCommission',
+    colProps: {span: 12},
+    labelWidth: 250,
     component: 'InputNumber',
   },
   {
-    label: '优先级',
+    label: '优先级(priority)',
     field: 'priority',
+    colProps: {span: 12},
+    labelWidth: 200,
     component: 'JDictSelectTag',
     componentProps:{
-        dictCode:""
+        dictCode:"priority"
      },
   },
   {
-    label: '备注',
+    label: '备注(notes)',
     field: 'notes',
-    component: 'Input',
+    colProps: {span: 12},
+    labelWidth: 200,
+    component: 'JDictSelectTag',
+    componentProps:{
+        dictCode:"valid_status"
+     },
+
   },
   {
-    label: '文件',
-    field: 'files',
+    label: '状态(status)',
+    field: 'status',
+    colProps: {span: 12},
+    labelWidth: 200,
     component: 'Input',
   },
 	// TODO 主键隐藏字段，目前写死为ID
@@ -317,61 +381,46 @@ export const formSchema: FormSchema[] = [
 //子表表格配置
 export const cuspCustomerProfileManColumns: JVxeColumn[] = [
     {
-      title: '状态(1-启用,0-停用)',
-      key: 'status',
-      type: JVxeTypes.inputNumber,
-      width:"200px",
-      placeholder: '请输入${title}',
-      defaultValue:'',
-    },
-    {
-      title: '主表主键（客户档案）',
-      key: 'headId',
-      type: JVxeTypes.input,
-      width:"200px",
-      placeholder: '请输入${title}',
-      defaultValue:'',
-    },
-    {
-      title: '编码',
-      key: 'code',
-      type: JVxeTypes.input,
-      width:"200px",
-      placeholder: '请输入${title}',
-      defaultValue:'',
-    },
-    {
-      title: '姓名',
+      title: '姓名(name)',
       key: 'name',
       type: JVxeTypes.input,
-      width:"200px",
       placeholder: '请输入${title}',
       defaultValue:'',
     },
     {
-      title: '电话',
+      title: '电话(mobile)',
       key: 'mobile',
       type: JVxeTypes.input,
-      width:"200px",
       placeholder: '请输入${title}',
       defaultValue:'',
     },
     {
-      title: '邮箱',
+      title: '邮箱(email)',
       key: 'email',
       type: JVxeTypes.input,
-      width:"200px",
       placeholder: '请输入${title}',
       defaultValue:'',
     },
     {
-      title: '职位',
+      title: '职位(position)',
       key: 'position',
       type: JVxeTypes.input,
-      width:"200px",
       placeholder: '请输入${title}',
       defaultValue:'',
     },
+    {
+      title: '操作(action)',
+      key: 'action',
+      width:"200px",
+      // 固定在右侧
+      fixed: 'right',
+      // 对齐方式为居中
+      align: 'center',
+      // 组件类型定义为【插槽】
+      type: JVxeTypes.slot,
+      // slot 的名称，对应 v-slot 冒号后面和等号前面的内容
+      slotName: 'action',
+    },
   ]
 
 

src/views/cuspCode/CustomerProfile/CuspCustomerProfileList.vue

@@ -69,7 +69,7 @@
                 ],
             },
            actionColumn: {
-               width: 120,
+               width: 200,
                fixed:'right'
            },
            beforeFetch: (params) => {
@@ -155,7 +155,7 @@
   function getTableAction(record){
        return [
          {
-           label: '编辑',
+           label: '编辑(edit)',
            onClick: handleEdit.bind(null, record),
            auth: 'cuspCode:cusp_customer_profile:edit'
          }
@@ -169,12 +169,12 @@
   function getDropDownAction(record){
     return [
       {
-        label: '详情',
+        label: '详情(detail)',
         onClick: handleDetail.bind(null, record),
       }, {
-        label: '删除',
+        label: '删除(delete)',
         popConfirm: {
-          title: '是否确认删除',
+          title: '是否确认删除(Are you sure to delete)',
           confirm: handleDelete.bind(null, record),
           placement: 'topLeft'
         },

src/views/cuspCode/CustomerProfile/components/CuspCustomerProfileForm.vue

@@ -17,7 +17,8 @@
           :rowSelection="true"
           :disabled="formDisabled"
           :toolbar="true"
-        />
+        >
+        </JVxeTable>
       </a-tab-pane>
     </a-tabs>
 

src/views/cuspCode/CustomerProfile/components/CuspCustomerProfileModal.vue

@@ -1,25 +1,34 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1024" @ok="handleSubmit">
-    <BasicForm @register="registerForm" ref="formRef" name="CuspCustomerProfileForm"/>
-    <!-- 子表单区域 -->
-    <a-tabs v-model:activeKey="activeKey" animated @change="handleChangeTabs">
-      <a-tab-pane tab="客户档案-联系人" key="cuspCustomerProfileMan" :forceRender="true">
-        <JVxeTable
-          keep-source
-          resizable
-          ref="cuspCustomerProfileMan"
-          :loading="cuspCustomerProfileManTable.loading"
-          :columns="cuspCustomerProfileManTable.columns"
-          :dataSource="cuspCustomerProfileManTable.dataSource"
-          :height="340"
-          :rowNumber="true"
-          :rowSelection="true"
-          :disabled="formDisabled"
-          :toolbar="true"
-          />
-      </a-tab-pane>
-    </a-tabs>
-  </BasicModal>
+ <div ref="globalModal">
+    <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" width="100%" :get-container="() => globalModal" @ok="handleSubmit">
+      <BasicForm @register="registerForm" ref="formRef" name="CuspCustomerProfileForm"/>
+      <!-- 子表单区域 -->
+      <a-tabs v-model:activeKey="activeKey" animated @change="handleChangeTabs">
+        <a-tab-pane tab="客户档案-联系人" key="cuspCustomerProfileMan" :forceRender="true">
+          <JVxeTable
+            keep-source
+            resizable
+            ref="cuspCustomerProfileMan"
+            :loading="cuspCustomerProfileManTable.loading"
+            :columns="cuspCustomerProfileManTable.columns"
+            :dataSource="cuspCustomerProfileManTable.dataSource"
+            :height="340"
+            :rowNumber="true"
+            :rowSelection="true"
+            :disabled="formDisabled"
+            :toolbar="true"
+            >
+            <template #action="props">
+                <a-divider type="vertical"/>
+                <a-popconfirm title="确定删除吗？" @confirm="handleDelete(props)">
+                  <a>删除(delete)</a>
+                </a-popconfirm>
+              </template>
+          </JVxeTable>
+        </a-tab-pane>
+      </a-tabs>
+    </BasicModal>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -38,6 +47,7 @@
     const refKeys = ref(['cuspCustomerProfileMan', ]);
     const activeKey = ref('cuspCustomerProfileMan');
     const cuspCustomerProfileMan = ref();
+    const globalModal = ref()
     const tableRefs = {cuspCustomerProfileMan, };
     const cuspCustomerProfileManTable = reactive({
           loading: false,
@@ -99,6 +109,9 @@
             setModalProps({confirmLoading: false});
         }
     }
+    function handleDelete({row}) {
+      cuspCustomerProfileMan.value?.removeRows(row)    
+    }
 </script>
 
 <style lang="less" scoped>
@@ -110,4 +123,13 @@
   :deep(.ant-calendar-picker) {
     width: 100%;
   }
+  /deep/.ant-form-item{
+      margin-bottom: 8px !important;
+  }
+  /deep/.ant-tabs{
+    margin-left: 2%;
+  }
+  /deep/.ant-modal{
+   top: 34px;
+  }
 </style>