暂存

src/Form/terminalCustomerFile/edit.vue

@@ -9,6 +9,7 @@
       :show-close="false"
       size="700px"
       @close="onCancel"
+      :wrapperClosable="false"
     >
       <div class="drawer__panel">
         <el-row :gutter="20">
@@ -43,55 +44,86 @@
               </el-form-item>
             </el-col>
             <el-col :span="24">
-              <el-form-item :label="$t('归属经销商')">
-                <el-popover placement="bottom" trigger="click" v-model="agentVisible" width="400">
-                  <div>
+              <el-form-item :label="$t('归属经销商')" prop="sa_agentsid">
+                <el-popover placement="bottom" width="600" trigger="manual" v-model="agentVisible">
+                  <div
+                    style="
+                      margin-bottom: 10px;
+                      display: flex;
+                      justify-content: space-between;
+                    "
+                  >
                     <el-input
-                      size="small"
+                      style="width: 300px"
                       :placeholder="$t('请输入搜索内容')"
                       v-model="searchAgent"
-                      @keyup.enter.native="getAgentList"
                       clearable
-                      @clear="getAgentList"
-                      style="margin-bottom: 10px"
-                    ></el-input>
-                    <div style="max-height: 300px; overflow-y: auto">
-                      <div
-                        v-for="item in agentList"
-                        :key="item.sa_agentsid"
-                        class="agent-item"
-                        :class="{ 'agent-item-active': form.sa_agentsid === item.sa_agentsid }"
-                        @click="selectAgent(item)"
-                      >
-                        <p>{{ item.enterprisename }}</p>
-                        <small style="color: #999">{{ item.address ? item.address : $t('暂无') }}</small>
-                      </div>
-                      <el-empty
-                        v-if="agentList.length === 0"
-                        :description="$t('暂无数据')"
-                        :image-size="40"
-                      ></el-empty>
-                    </div>
-                    <div style="text-align: right; margin-top: 10px">
-                      <el-button size="mini" @click="agentVisible = false">{{$t('取 消')}}</el-button>
-                    </div>
+                      @clear="handleSearch"
+                      size="mini"
+                      @keyup.enter.native="handleSearch"
+                    >
+                      <i slot="suffix" class="el-icon-search" @click="handleSearch"></i>
+                    </el-input>
+                    <el-button
+                      style="color: #333333"
+                      size="mini"
+                      @click="agentVisible = false"
+                    >{{ $t("关闭") }}</el-button>
                   </div>
+                  <el-table
+                    :data="agentList"
+                    @row-click="handleAgentRowClick"
+                    :header-cell-style="{ background: '#EEEEEE', color: '#333' }"
+                    size="mini"
+                    v-loading="agentLoading"
+                    highlight-current-row
+                  >
+                    <el-table-column width="200" :label="$t('合作伙伴名称')">
+                      <template slot-scope="scope">
+                        {{scope.row.enterprisename ? scope.row.enterprisename : "--"}}
+                      </template>
+                    </el-table-column>
+                    <el-table-column width="130" :label="$t('erp编号')">
+                      <template slot-scope="scope">
+                        {{scope.row.erpagentnum ? scope.row.erpagentnum : "--"}}
+                      </template>
+                    </el-table-column>
+                    <el-table-column width="130" :label="$t('合作伙伴编号')">
+                      <template slot-scope="scope">
+                        {{scope.row.agentnum ? scope.row.agentnum : "--"}}
+                      </template>
+                    </el-table-column>
+                    <el-table-column width="200" :label="$t('服务区域')">
+                      <template slot-scope="scope">
+                        {{scope.row.areas ? scope.row.areas : "--"}}
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                  <el-pagination
+                    v-if="agentTotal > agentPageSize"
+                    background
+                    small
+                    @size-change="handleAgentSizeChange"
+                    @current-change="handleAgentCurrentChange"
+                    :current-page="agentPageNumber"
+                    :page-size="agentPageSize"
+                    layout="total, prev, pager, next"
+                    :total="agentTotal"
+                    style="margin-top: 10px; text-align: right"
+                  ></el-pagination>
                   <el-input
                     readonly
                     type="text"
                     slot="reference"
                     size="small"
+                    :disabled="agentDisabled"
                     :placeholder="$t('请选择归属经销商')"
                     v-model="form.enterprisename"
+                    @focus="onAgentFocus"
                   ></el-input>
                 </el-popover>
               </el-form-item>
             </el-col>
-            <el-col :span="24">
-              <el-form-item :label="$t('备注')">
-                <el-input type="textarea" v-model="form.remarks" :placeholder="$t('请输入备注')"></el-input>
-              </el-form-item>
-            </el-col>
           </el-form>
         </el-row>
       </div>
@@ -116,9 +148,15 @@ export default {
     return {
       dialogFormVisible: false,
       agentVisible: false,
+      agentLoading: false,
       searchAgent: "",
       agentList: [],
+      agentTotal: 0,
+      agentPageNumber: 1,
+      agentPageSize: 20,
       regionValue: [],
+      userInfo: null,
+      agentDisabled: false,
       form: {
         sc_customers_terminalid: 0,
         name: "",
@@ -126,7 +164,6 @@ export default {
         province: "",
         city: "",
         county: "",
-        remarks: "",
         sa_agentsid: 0,
         enterprisename: ""
       },
@@ -144,15 +181,20 @@ export default {
             message: this.$t("请输入客户电话"),
             trigger: "blur"
           }
+        ],
+        sa_agentsid: [
+          {
+            required: true,
+            message: this.$t("请选择归属经销商"),
+            trigger: "change"
+          }
         ]
       },
       agentParam: {
-        id: 20210804113001,
+        id: 2026052016055302,
         content: {
-          isExport: false,
           pageNumber: 1,
           pageSize: 20,
-          nocache: true,
           where: {
             condition: ""
           }
@@ -161,6 +203,38 @@ export default {
     };
   },
   methods: {
+    // 获取用户信息，判断是否禁用归属经销商字段
+    async getUserInfo() {
+      let res = await this.$api.requested({
+        classname: "common.usercenter.usercenter",
+        method: "queryUserMsg",
+        content: {}
+      });
+      this.userInfo = res.data;
+      console.log("this.userInfo",this.userInfo)
+      this.checkAgentDisabled();
+    },
+    // 根据用户类型判断是否禁用"归属经销商"
+    checkAgentDisabled() {
+      if (!this.userInfo) return;
+      const usertype = this.userInfo.usertype;
+      console.log("usertype",usertype)
+      // 合作商21、合作商员工22 → 禁用，不可修改
+      if (usertype === 21 || usertype === 22) {
+        this.agentDisabled = true;
+      } else {
+        // 系统管理员0、企业员工1 及其他 → 可修改
+        this.agentDisabled = false;
+      }
+      console.log("this.agentDisabled ",this.agentDisabled )
+    },
+    formatServiceArea(item) {
+      if (!item.serviceArea) return "--";
+      if (Array.isArray(item.serviceArea)) {
+        return item.serviceArea.join("、");
+      }
+      return item.serviceArea;
+    },
     editBtn() {
       this.form = Object.assign({}, this.form, this.data);
       // 初始化省市县级联值
@@ -186,14 +260,40 @@ export default {
         this.form.county = "";
       }
     },
+    // 经销商搜索
+    handleSearch() {
+      this.agentPageNumber = 1;
+      this.getAgentList();
+    },
+    async onAgentFocus() {
+      if (this.agentDisabled) return;
+      this.agentVisible = true;
+      if (this.agentList.length === 0) {
+        await this.getAgentList();
+      }
+    },
     async getAgentList() {
+      this.agentLoading = true;
+      this.agentParam.content.pageNumber = this.agentPageNumber;
+      this.agentParam.content.pageSize = this.agentPageSize;
       this.agentParam.content.where.condition = this.searchAgent;
       const res = await this.$api.requested(this.agentParam);
       this.agentList = res.data || [];
+      this.agentTotal = res.total || 0;
+      this.agentLoading = false;
+    },
+    handleAgentSizeChange(val) {
+      this.agentPageSize = val;
+      this.getAgentList();
+    },
+    handleAgentCurrentChange(val) {
+      this.agentPageNumber = val;
+      this.getAgentList();
     },
-    selectAgent(item) {
-      this.form.sa_agentsid = item.sa_agentsid;
-      this.form.enterprisename = item.enterprisename;
+    handleAgentRowClick(row) {
+      this.form.sa_agentsid = row.sa_agentsid;
+      this.form.enterprisename = row.enterprisename;
+      this.$refs["form"].clearValidate("sa_agentsid");
       this.agentVisible = false;
     },
     onSubmit() {
@@ -208,6 +308,7 @@ export default {
             province: this.form.province,
             city: this.form.city,
             county: this.form.county,
+            address: this.form.address,
             remarks: this.form.remarks,
             sa_agentsid: this.form.sa_agentsid
           }
@@ -225,22 +326,11 @@ export default {
       this.$refs["form"].resetFields();
     }
   },
-  mounted() {}
+  mounted() {
+    this.getUserInfo();
+  }
 };
 </script>
 
 <style scoped>
-.agent-item {
-  padding: 8px 12px;
-  cursor: pointer;
-  border-bottom: 1px solid #f0f0f0;
-  transition: background-color 0.2s;
-}
-.agent-item:hover {
-  background-color: #f5f7fa;
-}
-.agent-item-active {
-  background-color: #ecf5ff;
-  color: #409eff;
-}
 </style>