From b86686bc7d5bccea1d4dd24b1d6605931f31a09f Mon Sep 17 00:00:00 2001
From: PQZ <pangqingzhou@gmail.com>
Date: Fri, 2 Aug 2024 09:55:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E7=AE=A1=E7=90=86=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/base/customer/CustomerMainForm.vue | 256 ++++++++++++++-----
 src/views/base/customer/index.vue            |  12 +-
 2 files changed, 195 insertions(+), 73 deletions(-)

diff --git a/src/views/base/customer/CustomerMainForm.vue b/src/views/base/customer/CustomerMainForm.vue
index f5f298e..4888017 100644
--- a/src/views/base/customer/CustomerMainForm.vue
+++ b/src/views/base/customer/CustomerMainForm.vue
@@ -1,64 +1,148 @@
 <template>
-  <div class="app-container">
+  <div>
     <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
-      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
-        <el-form-item label="sys_user表id" prop="userId">
-          <el-input v-model="formData.userId" placeholder="请输入sys_user表id"/>
-        </el-form-item>
-        <el-form-item label="用户类型" prop="typeCode">
-          <el-input v-model="formData.typeCode" placeholder="请输入用户类型"/>
-        </el-form-item>
-        <el-form-item label="所属企业code（部门表code）" prop="deptCode">
-          <el-input v-model="formData.deptCode" placeholder="请输入所属企业code（部门表code）"/>
-        </el-form-item>
-        <el-form-item label="客户名称（政企客户填企业名称）" prop="cusName">
-          <el-input v-model="formData.cusName" placeholder="请输入客户名称（政企客户填企业名称）"/>
-        </el-form-item>
-        <el-form-item label="联系方式" prop="phoneNumber">
-          <el-input v-model="formData.phoneNumber" placeholder="请输入联系方式"/>
-        </el-form-item>
-        <el-form-item label="生日" prop="birthday">
-          <el-date-picker clearable v-model="formData.birthday" type="date" value-format="timestamp"
-                          placeholder="选择生日"/>
-        </el-form-item>
-        <el-form-item label="住址" prop="address">
-          <el-input v-model="formData.address" placeholder="请输入住址"/>
-        </el-form-item>
-        <el-form-item label="性别" prop="sex">
-          <el-radio-group v-model="formData.sex">
-            <el-radio label="1">请选择字典生成</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="身份证号" prop="idCard">
-          <el-input v-model="formData.idCard" placeholder="请输入身份证号"/>
-        </el-form-item>
-        <el-form-item label="身份证照片">
-          <ImageUpload v-model="formData.idCardImage"/>
-        </el-form-item>
-        <el-form-item label="客户初始来源" prop="dataFrom">
-          <el-input v-model="formData.dataFrom" placeholder="请输入客户初始来源"/>
-        </el-form-item>
-        <el-form-item label="最近业务办理时间" prop="nearDoTime">
-          <el-date-picker clearable v-model="formData.nearDoTime" type="date" value-format="timestamp"
-                          placeholder="选择最近业务办理时间"/>
-        </el-form-item>
-        <el-form-item label="最近办理业务（数据字典业务标识）">
-          <Editor v-model="formData.nearDoContent" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="邀请者user_id" prop="inviter">
-          <el-input v-model="formData.inviter" placeholder="请输入邀请者user_id"/>
-        </el-form-item>
-        <el-form-item label="邀请者类型" prop="inviterType">
-          <el-select v-model="formData.inviterType" placeholder="请选择邀请者类型">
-            <el-option label="请选择字典生成" value=""/>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="客户状态" prop="status">
-          <el-radio-group v-model="formData.status">
-            <el-radio label="1">请选择字典生成</el-radio>
-          </el-radio-group>
-        </el-form-item>
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
+      <el-form size="small" ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading"
+               label-width="100px">
+        <el-collapse v-model="activeNames" >
+          <!--客户基本信息面板-->
+          <el-collapse-item title="客户基本信息" name="1">
+            <el-row :gutter="2">
+              <el-col :span="11">
+                <el-form-item label="客户名称" prop="cusName">
+                  <el-input v-model="formData.cusName" placeholder="请输入客户名称"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="11">
+                <el-form-item label="客户类型" prop="typeCode">
+                  <el-select v-model="formData.typeCode" placeholder="请选择客户类型">
+                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_TYPE)"
+                               :key="dict.value" :label="dict.label" :value="dict.value"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="2">
+              <el-col :span="11">
+                <el-form-item label="身份证号" prop="idCard">
+                  <el-input v-model="formData.idCard" placeholder="请输入客户身份证号"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="11">
+                <el-form-item label="性别" prop="sex">
+                  <el-radio-group v-model="formData.sex">
+                    <el-radio v-for="dict in sexDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+                      {{ dict.label }}
+                    </el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="2">
+              <el-col :span="11">
+                <el-form-item label="生日" prop="birthday">
+                  <el-input v-model="formData.birthday" placeholder="请输入客户身份证号"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="11">
+                <el-form-item label="联系方式" prop="phoneNumber">
+                  <el-input v-model="formData.phoneNumber" placeholder="请输入客户联系方式"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="2">
+              <el-col :span="11">
+                <el-form-item label="客户来源" prop="dataFrom">
+                  <el-select v-model="formData.dataFrom" placeholder="请选择客户来源">
+                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_DATA_FROM)"
+                               :key="dict.value" :label="dict.label" :value="dict.value"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="11">
+                <el-form-item label="注册方式" prop="inviterType">
+                  <el-select v-model="formData.inviterType" placeholder="请选择注册方式">
+                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_SIGN_TYPE)"
+                               :key="dict.value" :label="dict.label" :value="dict.value"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="22">
+                <el-form-item label="联系地址" prop="address">
+                  <el-input type="textarea" v-model="formData.address" placeholder="请输入客户联系地址"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-collapse-item>
+          <!--服务内容折叠面板面板-->
+          <el-collapse-item v-if="formData.typeCode=='03'" title="服务内容" name="2">
+            <el-table
+              :data="formData.itemList"
+              border
+              size="small"
+              style="width: 100%">
+              <el-table-column
+                prop="serContent"
+                align="left"
+                width="180">
+                <template slot="header">
+                  <i style="color: #409EFF;cursor:pointer" class="el-icon-circle-plus-outline" @click="addItem"/>
+                  服务内容
+                </template>
+                <template v-slot="scope">
+                  <el-select v-model="scope.row.serContent" placeholder="请选择服务内容">
+                    <el-option v-for="dict in cusBusiTypeDictDatas"
+                               :key="dict.value" :label="dict.label" :value="dict.value"/>
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="serTimeStart"
+                align="center"
+                label="开始日期">
+                <template v-slot="scope">
+                  <el-date-picker
+                    v-model="scope.row.serTimeStart"
+                    type="date"
+                    placeholder="选择服务开始日期">
+                  </el-date-picker>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="serTimeEnd"
+                align="center"
+                label="结束日期">
+                <template v-slot="scope">
+                  <el-date-picker
+                    v-model="scope.row.serTimeEnd"
+                    type="date"
+                    placeholder="选择服务结束日期">
+                  </el-date-picker>
+                </template>
+              </el-table-column>
+              <el-table-column
+                align="center"
+                width="100"
+                label="操作">
+                <template v-slot="scope">
+                  <el-button v-if="formData.itemList.length>1" size="mini" type="text" icon="el-icon-delete" @click="deleteItem(scope.$index, formData.itemList)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-collapse-item>
+          <!--附件-->
+<!--          <el-collapse-item title="附件" name="3">-->
+<!--            <el-row>-->
+<!--              <el-col>-->
+<!--                <el-form-item label="身份证照片">-->
+<!--                  <ImageUpload v-model="formData.idCardImage"/>-->
+<!--                </el-form-item>-->
+<!--              </el-col>-->
+<!--            </el-row>-->
+<!--          </el-collapse-item>-->
+        </el-collapse>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
@@ -72,6 +156,7 @@
 import * as CustomerMainApi from '@/api/base/customer';
 import ImageUpload from '@/components/ImageUpload';
 import Editor from '@/components/Editor';
+import {getDictDatas, DICT_TYPE} from '@/utils/dict'
 
 export default {
   name: "CustomerMainForm",
@@ -87,31 +172,61 @@ export default {
       dialogVisible: false,
       // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
       formLoading: false,
+      //折叠面板默认展开
+      activeNames: ['1','2','3'],
       // 表单参数
       formData: {
         id: undefined,
         userId: undefined,
-        typeCode: undefined,
+        typeCode: '01',
         deptCode: undefined,
         cusName: undefined,
         phoneNumber: undefined,
         birthday: undefined,
         address: undefined,
-        sex: undefined,
+        sex: 1,
         idCard: undefined,
         idCardImage: undefined,
-        dataFrom: undefined,
+        dataFrom: '08',
         nearDoTime: undefined,
         nearDoContent: undefined,
         inviter: undefined,
-        inviterType: undefined,
+        inviterType: '01',
         status: undefined,
+        itemList:[
+          {
+            serContent:'',
+            serTimeStart:'',
+            serTimeEnd:''
+          }
+        ],
       },
       // 表单校验
       formRules: {},
+      // 性别数据字典
+      sexDictDatas: getDictDatas(DICT_TYPE.DICT_SYS_USER_SEX),
+      cusBusiTypeDictDatas: getDictDatas(DICT_TYPE.DICT_CUS_BUSI_TYPE)
     };
   },
   methods: {
+    /**
+     * 新增服务内容
+     */
+    addItem(){
+      const item = {
+        serContent:'',
+        serTimeStart:'',
+        serTimeEnd:''
+      }
+      this.formData.itemList.push(item)
+    },
+    /**
+     * 移除服务内容
+     */
+    deleteItem(index, rows) {
+      rows.splice(index, 1);
+    },
+
     /** 打开弹窗 */
     async open(id) {
       this.dialogVisible = true;
@@ -158,21 +273,28 @@ export default {
       this.formData = {
         id: undefined,
         userId: undefined,
-        typeCode: undefined,
+        typeCode: '01',
         deptCode: undefined,
         cusName: undefined,
         phoneNumber: undefined,
         birthday: undefined,
         address: undefined,
-        sex: undefined,
+        sex: 1,
         idCard: undefined,
         idCardImage: undefined,
-        dataFrom: undefined,
+        dataFrom: '08',
         nearDoTime: undefined,
         nearDoContent: undefined,
         inviter: undefined,
-        inviterType: undefined,
+        inviterType: '01',
         status: undefined,
+        itemList:[
+          {
+            serContent:'',
+            serTimeStart:'',
+            serTimeEnd:''
+          }
+        ],
       };
       this.resetForm("formRef");
     }
diff --git a/src/views/base/customer/index.vue b/src/views/base/customer/index.vue
index 42903f7..70ac936 100644
--- a/src/views/base/customer/index.vue
+++ b/src/views/base/customer/index.vue
@@ -32,12 +32,12 @@
                    v-hasPermi="['base:customer-main:create']">新增
         </el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-                   :loading="exportLoading"
-                   v-hasPermi="['base:customer-main:export']">导出
-        </el-button>
-      </el-col>
+<!--      <el-col :span="1.5">-->
+<!--        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"-->
+<!--                   :loading="exportLoading"-->
+<!--                   v-hasPermi="['base:customer-main:export']">导出-->
+<!--        </el-button>-->
+<!--      </el-col>-->
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>