fix: 组件名称修改

src/components/company/add-relate-new.vue

+<!--
+ * @Descripttion : 当前组件信息
+ * @Author       : 无尘
+ * @Date         : 2020-02-13 16:13:59
+ * @LastEditors: Drama
+ * @LastEditTime: 2022-09-23 10:23:56
+ * @FilePath: /haoban-3/src/components/company/add-relate-new.vue
+ -->
+<!--
+
+  <add-relate :departObj="departObj" @refreshData="refreshData"></add-relate>
+  import addRelate from '@/components/company/add-relate.vue';
+  -->
+
+<template>
+  <el-dialog custom-class="add-remote-dialog" width="600px" title="新增关联" :visible.sync="departVisible" append-to-body :before-close="handleClose">
+    <el-form :model="partForm" label-width="95px" :rules="rules" ref="partForm" class="dialog-form">
+      <el-form-item label="关联角色" prop="manageFlag">
+        <el-radio-group v-model="partForm.manageFlag" @change="manageChange">
+          <el-radio :label="0">导购</el-radio>
+          <el-radio :label="1">区经/督导</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="关联账号" prop="clerkId">
+        <di key="1" v-if="partForm.manageFlag == 0">
+          <dm-select-scroller v-model="partForm.clerkId" placeholder="请选择" :data="brandList" :props="props" :width="352" @load="load" @remote-search="remoteSearch" :total-count="totalCount" :clearable="true"></dm-select-scroller>
+        </di>
+        <di key="2" v-if="partForm.manageFlag == 1">
+          <dm-select-scroller v-model="partForm.clerkId" placeholder="请选择" :data="brandList" :props="props" :width="352" @load="load" @remote-search="remoteSearch" :total-count="totalCount" :clearable="true"></dm-select-scroller>
+        </di>
+        <div v-if="isShowError" class="el-form-item__error">请选择关联账号</div>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button class="btn-class" @click="cancel">取消</el-button>
+      <el-button class="btn-class" type="primary" :loading="loading" @click="submitForm('partForm')">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import limitInput from '@/components/limit-input.vue';
+import { getRequest, postRequest } from '@/api/api';
+import errMsg from '@/common/js/error';
+import showMsg from '@/common/js/showmsg';
+import { _debounce } from '@/common/js/public';
+import store from '../../store/store';
+export default {
+  name: 'add-relate',
+  components: {
+    limitInput
+  },
+  props: {
+    departObj: {
+      type: [Object, Array],
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      partForm: {
+        salerName: '',
+        manageFlag: 0, // TODO: 关联角色 导购 区经/督导
+        clerkId: ''
+      },
+      brandParams: {
+        pageNum: 1,
+        pageSize: 10,
+        search: ''
+      }, // TODO: 远程搜索参数
+      rules: {
+        salerName: [
+          {
+            required: true,
+            message: '请选择导购',
+            trigger: 'change'
+          }
+        ]
+      },
+      selectId: '',
+      departVisible: true,
+      loading: false,
+      visible: false,
+      brandList: [], // TODO: 远程搜索数组
+      brandList_0: [],
+      brandList_1: [],
+      totalCount: 99999,
+      props: {
+        label: 'clerkName',
+        value: 'clerkId',
+        childLabel: 'storeName',
+        sideLabel: 'clerkCode'
+      },
+      isShowError: false
+    };
+  },
+  methods: {
+    manageChange(value) {
+      console.log(value, '按钮切换');
+      this.partForm.clerkId = '';
+      this.brandParams.search = '';
+      this.brandList = [];
+      // TODO: 若选择马上切换需要取消上个请求
+      store.getters.axiosPromiseArr.forEach(cancel => cancel());
+      store.commit('setAxiosPromiseArr', []);
+    },
+    // 加载更多
+    load() {
+      console.log('load');
+      // this.brandParams.pageNum++;
+      // this.getRemoteAccountList();
+    },
+    // 远程搜索方法
+    remoteSearch(query) {
+      this.brandParams.search = query;
+      this.brandParams.pageNum = 1;
+      this.searchRemote();
+    },
+    searchRemote: _debounce(function() {
+      const that = this;
+      if (that.brandParams.search.trim() == '') {
+        this.brandList = [];
+        return false;
+      }
+      that.getRemoteAccountList();
+    }, 500),
+    // 获取远程关联账号数据
+    getRemoteAccountList() {
+      // if (this.brandParams.pageNum == 1) {
+      //   this.brandList = [];
+      // }
+      this.brandList = [];
+      let para = {
+        search: this.brandParams.search,
+        manageFlag: this.partForm.manageFlag
+      };
+      getRequest('/haoban-manage3-web/search-clerk-relation', para)
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            this.brandList = resData.result || [];
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          console.log(error);
+          // this.$message.error({
+          //   duration: 1000,
+          //   message: error.message
+          // });
+        });
+    },
+    /**
+     * 关闭弹窗
+     */
+    handleClose(done) {
+      const that = this;
+      that.$refs['partForm'].resetFields();
+      that.$emit('refreshData', 'close');
+      done();
+    },
+    cancel() {
+      const that = this;
+      that.$refs['partForm'].resetFields();
+      that.$emit('refreshData', 'close');
+    },
+    /**
+     * 确定保存
+     */
+    submitForm: _debounce(function(form) {
+      const that = this;
+      that.loading = true;
+      that.$refs[form].validate(valid => {
+        if (valid) {
+          if (!that.partForm.clerkId) {
+            this.isShowError = true;
+            return;
+          }
+          that.postAdd();
+        } else {
+          that.loading = false;
+          return false;
+        }
+      });
+    }, 300),
+    postAdd() {
+      const that = this;
+      let params = {
+        staffId: that.departObj.staffId,
+        manageFlag: that.partForm.manageFlag,
+        clerkId: that.partForm.clerkId
+      };
+      console.log(params, '保存的参数');
+      that.loading = false;
+      postRequest('/haoban-manage3-web/add-clerk-relation', params)
+        .then(res => {
+          let resData = res.data;
+          that.loading = false;
+          if (resData.errorCode == 1) {
+            showMsg.showmsg('添加成功', 'success');
+            that.$emit('refreshData', that.partForm);
+            return false;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.loading = false;
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    }
+  },
+  watch: {
+    'partForm.clerkId': {
+      deep: true,
+      handler: function(newV, oldV) {
+        console.log(newV, '监听');
+        if (newV) {
+          this.isShowError = false;
+        }
+      }
+    }
+  },
+  mounted() {
+    // TODO: 初始化加载
+    // this.getRemoteAccountList();
+  }
+};
+</script>
+<style lang="less" scoped>
+/deep/ .add-remote-dialog {
+  // .el-dialog {
+  //   height: 221px;
+  // }
+  .el-dialog__header {
+    padding: 24px 24px 0 24px;
+    .el-dialog__title {
+      line-height: 25px;
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #37383a;
+    }
+  }
+  .el-dialog__body {
+    padding: 30px;
+  }
+}
+// .damolish .el-select-dropdown .el-select-dropdown__empty {
+//   width: 352px;
+// }
+// .damolish .el-select-dropdown .el-select-dropdown__item {
+//   height: 45px;
+//   line-height: 45px;
+// }
+.w-95 {
+  width: 95px;
+}
+.w-352 {
+  width: 352px;
+}
+.m-l-30 {
+  margin-left: 30px;
+}
+.w-319 {
+  width: 319px;
+}
+.w-558 {
+  width: 558px;
+}
+.btn-class {
+  box-sizing: border-box;
+  padding: 5px 24px;
+  width: 80px;
+  height: 32px;
+}
+.damolish .el-popper {
+  min-width: 352px;
+}
+
+.text-ellipsis {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>