打标签

src/api/base/customer/index.js

@@ -17,6 +17,14 @@ export function bindCustomerCar(data) {
   })
 }
 
+export function setLabelList(data) {
+  return request({
+    url: '/base/custom/setLabel',
+    method: 'post',
+    data: data
+  })
+}
+
 // 更新客户管理
 export function updateCustomerMain(data) {
   return request({

src/views/base/customer/CustomerLabelForm.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>客户基本信息</span>
+        </div>
+        <el-descriptions class="margin-top" :column="3" border>
+          <el-descriptions-item>
+            <template slot="label">
+              客户名称
+            </template>
+            {{ formData.cusName }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              性别
+            </template>
+            <dict-tag :type="DICT_TYPE.DICT_SYS_USER_SEX" :value="formData.sex"/>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              联系方式
+            </template>
+            {{ formData.phoneNumber }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              生日
+            </template>
+            {{ parseTime(formData.birthday, '{y}-{m}-{d}') }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              客户来源
+            </template>
+            <dict-tag :type="DICT_TYPE.DICT_CUS_DATA_FROM" :value="formData.dataFrom"/>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              最近办理业务
+            </template>
+            <dict-tag :type="DICT_TYPE.DICT_CUS_BUSI_TYPE" :value="formData.nearDoContent"/>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              联系地址
+            </template>
+            {{ formData.address }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>客户标签</span>
+          <el-button @click="openBusiLabel" style="float: right; padding: 3px 0" type="text">打标签</el-button>
+        </div>
+        <el-row>
+          <el-empty v-if="formData.labelList.length == 0" description="暂无标签信息" :image-size="100"></el-empty>
+          <template v-for="item in formData.labelList">
+            <el-popover
+              placement="top-start"
+              width="200"
+              trigger="hover"
+              :content="item.labelContent">
+              <el-tag
+                style="margin-left: 5px"
+                :key="item.id"
+                closable
+                @close="tagClose(item)"
+                slot="reference"
+                :type="item.labelType">
+                {{ item.labelName }}
+              </el-tag>
+            </el-popover>
+          </template>
+        </el-row>
+      </el-card>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+    <BusiLabelForm ref="busiLabelForm" @ok="setLabel"/>
+  </div>
+</template>
+
+<script>
+import * as CustomerMainApi from '@/api/base/customer';
+import BusiLabelForm from '@/views/base/label/BusiLabelForm.vue';
+export default {
+  name: "CustomerLabelForm",
+  components: {BusiLabelForm},
+  data() {
+    return {
+      // 弹出层标题
+      dialogTitle: "",
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      //回参
+      formData: {
+        labelList: [],
+      },
+
+    };
+  },
+  methods: {
+    /** 删除标签 */
+    tagClose(row){
+      let id1 = this.formData.labelList.findIndex(item => {
+        if (item.id == row.id) {
+          return true
+        }
+      })
+      this.formData.labelList.splice(id1, 1)
+    },
+
+    /** 打开弹窗 */
+    async open(row) {
+      this.dialogVisible = true;
+      this.formLoading = true;
+      this.reset()
+      try {
+        const res = await CustomerMainApi.getCustomerMain(row.id);
+        this.formData = res.data
+        this.dialogTitle = "打标签";
+      } finally {
+        this.formLoading = false;
+      }
+    },
+
+    /**删除标签信息*/
+    deleteLabel(row) {
+      this.formData.labelList.forEach((item, index) => {
+        if (item.id == row.id) {
+          this.formData.labelList.splice(index, 1)
+        }
+      })
+    },
+
+    /**重置*/
+    reset() {
+      this.formData = {
+        labelList: [],
+      }
+    },
+
+    /**设置标签内容*/
+    setLabel(row){
+      this.formData.labelList.push(JSON.parse(JSON.stringify(row)))
+    },
+
+    /**新增业务标签*/
+    openBusiLabel(){
+      this.$refs["busiLabelForm"].open(this.formData);
+    },
+
+
+    /** 提交按钮 */
+    async submitForm() {
+      this.formLoading = true
+      try {
+        const data = this.formData;
+        await CustomerMainApi.setLabelList(data);
+        this.$modal.msgSuccess("设置标签成功");
+        this.dialogVisible = false;
+        this.$emit('success');
+      } finally {
+        this.formLoading = false
+      }
+    },
+
+  }
+};
+</script>

src/views/base/customer/components/PrivateCustomer.vue

@@ -92,6 +92,7 @@
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="bindCar" size="mini" type="text" icon="el-icon-truck"
                                 v-hasPermi="['base:customer-main:car']">绑定车辆</el-dropdown-item>
+              <el-dropdown-item command="bindLabel" size="mini" type="text" icon="el-icon-s-management">打标签</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
 
@@ -104,6 +105,7 @@
     <!-- 对话框(添加 / 修改) -->
     <CustomerMainForm ref="formRef" @success="getList"/>
     <CustomerCarForm ref="carFormRef" @success="getList"/>
+    <CustomerLabelForm ref="labelFormRef" @success="getList"/>
   </div>
 </template>
 
@@ -111,10 +113,11 @@
 import * as CustomerMainApi from '@/api/base/customer';
 import CustomerMainForm from '@/views/base/customer/CustomerMainForm.vue';
 import CustomerCarForm from '@/views/base/customer/CustomerCarForm.vue';
+import CustomerLabelForm from '@/views/base/customer/CustomerLabelForm.vue';
 export default {
   name: "PrivateCustomer",
   components: {
-    CustomerMainForm,CustomerCarForm
+    CustomerMainForm,CustomerCarForm,CustomerLabelForm
   },
   props:{
     typeCode: {
@@ -176,10 +179,17 @@ export default {
           //绑定车辆信息
           this.bindCar(row);
           break;
+        case 'bindLabel':
+          this.bindLabel(row);
+          break;
         default:
           break;
       }
     },
+    /**打标签*/
+    bindLabel(row){
+      this.$refs["labelFormRef"].open(row);
+    },
     /** 查询列表 */
     async getList() {
       try {

src/views/base/label/BusiLabelForm.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="app-container">
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
+      <el-form ref="formRef" :model="labelData" :rules="formRules" v-loading="formLoading" label-width="100px">
+        <el-form-item label="标签名称" prop="labelName">
+          <el-input v-model="labelData.labelName" placeholder="请输入标签名称"/>
+        </el-form-item>
+        <el-form-item label="标签样式" prop="labelType">
+          <el-select v-model="labelData.labelType" placeholder="请选择标签样式">
+            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_BASE_LABEL_TYPE)"
+                       :key="dict.value" :label="dict.label" :value="dict.value"/>
+          </el-select>
+           实例：<el-tag :type="labelData.labelType">{{ labelData.labelName }}</el-tag>
+        </el-form-item>
+        <el-form-item label="标签描述" prop="labelContent">
+          <el-input type="textarea" v-model="labelData.labelContent" placeholder="请输入标签描述"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "BusiLabelForm",
+  components: {},
+  data() {
+    return {
+      // 弹出层标题
+      dialogTitle: "",
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      labelData: {
+        id: undefined,
+        labelName: undefined,
+        labelContent: undefined,
+        labelType: undefined
+      },
+      // 表单校验
+      formRules: {
+        labelName: [
+          {required: true, message: '请输入标签名称', trigger: 'blur'},
+        ],
+        labelType: [
+          {required: true, message: '请选择标签样式', trigger: 'blur'},
+        ],
+      },
+    };
+  },
+  methods: {
+    /** 打开弹窗 */
+    async open(row) {
+      this.dialogVisible = true;
+      this.reset();
+      this.dialogTitle = row.cusName
+      this.labelData.mainId = row.id
+      // 修改时，设置数据
+      // if (row) {
+      //   this.formLoading = true;
+      //   try {
+      //     this.labelData = row;
+      //   } finally {
+      //     this.formLoading = false;
+      //   }
+      // }
+    },
+    /** 提交按钮 */
+    async submitForm() {
+      await this.$refs["formRef"].validate();
+      //生成随机数
+      this.labelData.id = Math.random()*10
+      const data = this.labelData
+      this.$emit('ok',data)
+      this.dialogVisible = false
+    },
+    /** 表单重置 */
+    reset() {
+      this.labelData = {
+        id: undefined,
+        labelType: undefined,
+        labelName: undefined,
+        labelContent: undefined,
+      };
+      this.resetForm("formRef");
+    }
+  }
+};
+</script>