From 2143da5dce4c252e824a7bc96e7b2745b37a4807 Mon Sep 17 00:00:00 2001
From: wanglei <1336977847@qq.com>
Date: Tue, 25 Jun 2024 11:13:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=A1=A3=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppArchives/components/Add.vue            | 266 +++++++++++-------
 .../AppArchives/components/List.vue           |  20 +-
 2 files changed, 170 insertions(+), 116 deletions(-)

diff --git a/project/fengdu/AppOutSource/AppArchives/components/Add.vue b/project/fengdu/AppOutSource/AppArchives/components/Add.vue
index 8102f7d8..c96ae51f 100644
--- a/project/fengdu/AppOutSource/AppArchives/components/Add.vue
+++ b/project/fengdu/AppOutSource/AppArchives/components/Add.vue
@@ -1,119 +1,141 @@
 <template>
-  <ai-detail class="add">
-    <template slot="title">
-      <ai-title title="添加档案" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
-    </template>
-    <template slot="content">
-      <el-form class="content-right" :model="form" ref="ruleForm" :rules="rules" label-width="130px"
-               label-position="right" size="small">
+  <div>
+    <ai-detail class="add">
+      <template slot="title">
+        <ai-title title="添加档案" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
+      </template>
+      <template slot="content">
+        <el-form class="content-right" :model="form" ref="ruleForm" :rules="rules" label-width="130px"
+                 label-position="right" size="small">
 
-        <ai-card title="基本信息">
-          <template #content>
-            <el-row type="flex">
-              <el-form-item label="经营者姓名：" style="width: 100%;" prop="name">
-                <el-input v-model="form.name" placeholder="请输入姓名" autocomplete="off"
-                          size="small" maxlength="20"
-                          show-word-limit></el-input>
-              </el-form-item>
-              <el-form-item label="身份证号：" style="width: 100%;" prop="idNumber">
-                <el-input v-model="form.idNumber" placeholder="请输入身份证号" autocomplete="off"
-                          size="small" maxlength="18" @change="idChange"
-                          show-word-limit></el-input>
-              </el-form-item>
-            </el-row>
-            <el-row type="flex">
-              <el-form-item label="性别：" style="width: 100%;" prop="sex">
-                <ai-select
-                    v-model="form.sex"
-                    style="width: 100%;"
-                    placeholder="性别"
-                    :selectList="$dict.getDict('sex')">
-                </ai-select>
-              </el-form-item>
-              <el-form-item label="联系电话：" v-model="form.phone" style="width: 100%;" prop="phone">
-                <el-input v-model="form.phone" placeholder="请输入联系电话" autocomplete="off"
-                          size="small" maxlength="18"
-                          show-word-limit></el-input>
-              </el-form-item>
-            </el-row>
-            <el-row type="flex">
-              <el-form-item label="出生日期：" style="width: 100%;" prop="birthday">
-                <el-date-picker value-format="yyyy-MM-dd" size="small" v-model="form.birthday"
-                                placeholder="请选择出生日期" disabled style="width: 100%"></el-date-picker>
-              </el-form-item>
-              <el-form-item label="年龄：" style="width: 100%;" prop="age">
-                <el-input v-model="form.age" placeholder="请输入年龄" disabled autocomplete="off"
-                          size="small"></el-input>
-              </el-form-item>
-            </el-row>
-          </template>
-        </ai-card>
-        <ai-card title="门店信息">
-          <template #content>
-            <el-row type="flex">
-              <div class="flex-colum">
-                <el-form-item label="门店名称：" style="width: 100%;" prop="shopName">
-                  <el-input v-model="form.shopName" placeholder="请输入姓名" autocomplete="off"
+          <ai-card title="基本信息">
+            <template #content>
+              <el-row type="flex">
+                <el-form-item label="经营者姓名：" style="width: 100%;" prop="name">
+                  <el-input v-model="form.name" placeholder="请输入姓名" autocomplete="off"
                             size="small" maxlength="20"
                             show-word-limit></el-input>
                 </el-form-item>
-                <el-form-item label="经营类型：" style="width: 100%;" prop="operatorType">
+                <el-form-item label="身份证号：" style="width: 100%;" prop="idNumber">
+                  <el-input v-model="form.idNumber" placeholder="请输入身份证号" autocomplete="off"
+                            size="small" maxlength="18" @change="idChange"
+                            show-word-limit></el-input>
+                </el-form-item>
+              </el-row>
+              <el-row type="flex">
+                <el-form-item label="性别：" style="width: 100%;" prop="sex">
                   <ai-select
-                      v-model="form.operatorType"
-                      placeholder="请选择经营范围"
-                      :selectList="$dict.getDict('operatorType')"   style="width: 100%;">
+                      v-model="form.sex"
+                      style="width: 100%;"
+                      placeholder="性别"
+                      :selectList="$dict.getDict('sex')">
                   </ai-select>
                 </el-form-item>
-                <el-form-item label="所属片区：" style="width: 100%;" prop="girdCode">
-                  <el-select placeholder="请选择所属片区" size="small" v-model="form.girdCode"
-                             style="width: 100%;"></el-select>
+                <el-form-item label="联系电话：" v-model="form.phone" style="width: 100%;" prop="phone">
+                  <el-input v-model="form.phone" placeholder="请输入联系电话" autocomplete="off"
+                            size="small" maxlength="18"
+                            show-word-limit></el-input>
                 </el-form-item>
-              </div>
+              </el-row>
+              <el-row type="flex">
+                <el-form-item label="出生日期：" style="width: 100%;" prop="birthday">
+                  <el-date-picker value-format="yyyy-MM-dd" size="small" v-model="form.birthday"
+                                  placeholder="请选择出生日期" disabled style="width: 100%"></el-date-picker>
+                </el-form-item>
+                <el-form-item label="年龄：" style="width: 100%;" prop="age">
+                  <el-input v-model="form.age" placeholder="请输入年龄" disabled autocomplete="off"
+                            size="small"></el-input>
+                </el-form-item>
+              </el-row>
+            </template>
+          </ai-card>
+          <ai-card title="门店信息">
+            <template #content>
+              <el-row type="flex">
+                <div class="flex-colum">
+                  <el-form-item label="门店名称：" style="width: 100%;" prop="shopName">
+                    <el-input v-model="form.shopName" placeholder="请输入姓名" autocomplete="off"
+                              size="small" maxlength="20"
+                              show-word-limit></el-input>
+                  </el-form-item>
+                  <el-form-item label="经营类型：" style="width: 100%;" prop="operatorType">
+                    <ai-select
+                        v-model="form.operatorType"
+                        placeholder="请选择经营范围"
+                        :selectList="$dict.getDict('operatorType')" style="width: 100%;">
+                    </ai-select>
+                  </el-form-item>
+                  <el-form-item label="所属片区：" style="width: 100%;" prop="girdCode">
+                    <el-input disabled v-model="form.girdName" size="small" placeholder="请选择片区">
+                      <template slot="append">
+                        <el-button size="small" @click="handleSelectGrid">选择片区</el-button>
+                      </template>
+                    </el-input>
+                  </el-form-item>
+                </div>
 
-              <el-form-item label="门店照片" style="width: 100%;" prop="fileUrl">
-                <ai-uploader
-                    :instance="instance"
-                    isShowTip
-                    v-model="form.fileUrl"
-                    :limit="1"
-                    :cropOps="cropOps"
-                    is-crop>
-                  <template slot="tips">
-                    <p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
-                    <p>图片比例：1.6：1</p>
-                  </template>
-                </ai-uploader>
+                <el-form-item label="门店照片" style="width: 100%;" prop="fileUrl">
+                  <ai-uploader
+                      :instance="instance"
+                      isShowTip
+                      v-model="form.fileUrl"
+                      :limit="1"
+                      is-crop>
+                    <template slot="tips">
+                      <p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
+                      <p>图片比例：1.6：1</p>
+                    </template>
+                  </ai-uploader>
+                </el-form-item>
+              </el-row>
+              <el-form-item label="社会信用代码：" style="width: 100%;" prop="creditCode">
+                <el-input v-model="form.creditCode" placeholder="请输入社会统一信用代码" size="small"></el-input>
               </el-form-item>
-            </el-row>
-            <el-form-item label="社会信用代码：" style="width: 100%;" prop="creditCode">
-              <el-input v-model="form.creditCode" placeholder="请输入社会统一信用代码" size="small"></el-input>
-            </el-form-item>
-            <el-form-item label="门店住址：" style="width: 100%;" prop="addressCode">
-              <ai-area-select :instance="instance" clearable v-model="form.addressCode" always-show
-                              @name="v=>form.areaName=v"/>
-            </el-form-item>
-            <el-form-item label="" style="width:100%" prop="address">
-              <el-input
-                  size="small"
-                  placeholder="请输入详细地址"
-                  clearable
-                  v-model="form.address"
-                  maxlength="50"
-                  show-word-limit
-              ></el-input>
-            </el-form-item>
-            <el-form-item label="门店描述：" style="width: 100%" prop="description">
-              <el-input v-model="form.description" placeholder="请输入门店描述" type="textarea" :rows="3"></el-input>
-            </el-form-item>
-          </template>
-        </ai-card>
-      </el-form>
-    </template>
-    <template #footer>
-      <el-button @click="cancel">取消</el-button>
-      <el-button type="primary" @click="handleSave">保存</el-button>
-    </template>
-  </ai-detail>
+              <el-form-item label="门店住址：" style="width: 100%;" prop="addressCode">
+                <ai-area-select :instance="instance" clearable always-show
+                                :disabled-level="$store.state.user.info.areaList.length"
+                                @name="v=>form.areaName=v" v-model="form.areaId"/>
+              </el-form-item>
+              <el-form-item label="" style="width:100%" prop="address">
+                <el-input
+                    size="small"
+                    placeholder="请输入详细地址"
+                    clearable
+                    v-model="form.address"
+                    maxlength="50"
+                    show-word-limit
+                ></el-input>
+              </el-form-item>
+              <el-form-item label="门店描述：" style="width: 100%" prop="description">
+                <el-input v-model="form.description" placeholder="请输入门店描述" type="textarea" :rows="3"></el-input>
+              </el-form-item>
+            </template>
+          </ai-card>
+        </el-form>
+      </template>
+      <template #footer>
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="handleSave">保存</el-button>
+      </template>
+    </ai-detail>
+    <ai-dialog title="选择片区" :visible.sync="dialog" :customFooter="true" border width="720px">
+      <div class="grid">
+        <el-tree
+            :data="treeList"
+            :props="defaultProps"
+            node-key="id"
+            ref="treeRef"
+            :check-strictly="true"
+            show-checkbox
+            @check="onCheckChange">
+        </el-tree>
+      </div>
+      <div class="dialog-footer" slot="footer">
+        <el-button size="medium" @click="dialog=false">取消</el-button>
+        <el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
+      </div>
+    </ai-dialog>
+  </div>
 </template>
 
 <script>
@@ -131,7 +153,8 @@ export default {
   data() {
     return {
       form: {
-        id:null,
+        id: null,
+        areaId: '',
         name: '',
         idNumber: '',
         sex: '',
@@ -139,6 +162,12 @@ export default {
         birthday: '',
         age: '',
       },
+      dialog: false,
+      treeList: [],
+      defaultProps: {
+        children: "children",
+        label: "girdName",
+      },
       rules: {
         name: [{required: true, message: '请输入经营者姓名', trigger: 'blur'}],
         idNumber: [{required: true, message: '请输入身份证号', trigger: 'blur'}],
@@ -154,11 +183,30 @@ export default {
   },
 
   created() {
-    this.$dict.load('sex','operatorType')
+    this.form.areaId = this.$store.state.user.info.areaId
+    this.$dict.load('sex', 'operatorType')
   },
 
-
   methods: {
+    async handleSelectGrid() {
+      try {
+        this.dialog = true
+        const {code, data} = await this.instance.post('/app/appgirdinfo/listAll3')
+        if (code === 0) {
+          console.log('data--->', data)
+        }
+      } catch (e) {
+        console.error(e)
+      }
+    },
+
+    getCheckedTree() {
+
+    },
+    onCheckChange(e) {
+
+    },
+
     idChange(val) {
       if (val.length == 18) {
         this.IdCard(val);
@@ -180,7 +228,7 @@ export default {
             ...this.form
           }
         })
-        if(code===0){
+        if (code === 0) {
           this.$message.success('保存成功');
           this.form = {...data}
         }
diff --git a/project/fengdu/AppOutSource/AppArchives/components/List.vue b/project/fengdu/AppOutSource/AppArchives/components/List.vue
index f4f51957..8df8911e 100644
--- a/project/fengdu/AppOutSource/AppArchives/components/List.vue
+++ b/project/fengdu/AppOutSource/AppArchives/components/List.vue
@@ -2,7 +2,7 @@
   <div>
     <ai-list class="app-archives-list">
       <template slot="title">
-        <ai-title title="门店档案" isShowBottomBorder></ai-title>
+        <ai-title title="门店档案" isShowBottomBorder v-model="search.areaId" isShowArea :hideLevel="hideLevel - 1" @change="search.current = 1, getList()"></ai-title>
       </template>
       <template slot="content">
         <ai-search-bar class="search-bar">
@@ -44,12 +44,6 @@
                 placeholder="经营类型"
                 :selectList="$dict.getDict('operatorType')">
             </ai-select>
-            <ai-select
-                v-model="search.status"
-                @change="(search.current = 1), getList()"
-                placeholder="所属片区"
-                :selectList="$dict.getDict('appIntegralApplyEventStatus')">
-            </ai-select>
           </template>
           <template #right>
             <el-input
@@ -124,6 +118,7 @@
 
 <script>
 import { MessageBox } from 'element-ui'
+import {mapState} from "vuex";
 
 export default {
   name: 'List',
@@ -135,6 +130,7 @@ export default {
   data () {
     return {
       search: {
+        areaId:'',
         current: 1,
         size: 10,
         applyItemId: '',
@@ -163,7 +159,17 @@ export default {
     }
   },
 
+
+  computed:{
+  ...mapState(['user']),
+
+  hideLevel () {
+      return this.user.info.areaList.length || 0
+    },
+  },
+
   created () {
+    this.search.areaId = this.user.info.areaId
     this.$dict.load('yesOrNo','storeLevel','operatorType').then(() => {
       this.getList()
     })