From 14404f023e819ab58bb7b52ea02506dc9ce85209 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chhk=E2=80=9D?= <“hhk@mail.com”>
Date: Wed, 7 Aug 2024 18:01:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=93=81=E7=89=8C=E5=9E=8B=E5=8F=B7=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CarBrandSelector/Api/index.js  |  11 +
 .../components/CarBrandSelector/index.vue     | 232 ++++++++++--------
 .../base/carmain/components/CarLabelForm.vue  | 185 ++++++++++++++
 3 files changed, 330 insertions(+), 98 deletions(-)
 create mode 100644 src/layout/components/CarBrandSelector/Api/index.js
 create mode 100644 src/views/base/carmain/components/CarLabelForm.vue

diff --git a/src/layout/components/CarBrandSelector/Api/index.js b/src/layout/components/CarBrandSelector/Api/index.js
new file mode 100644
index 0000000..0561251
--- /dev/null
+++ b/src/layout/components/CarBrandSelector/Api/index.js
@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+// 创建车辆品牌维护
+export function searchBrand(data) {
+  return request({
+    url: '/base/carModel/searchBrand',
+    method: 'post',
+    data: data
+  })
+}
+
diff --git a/src/layout/components/CarBrandSelector/index.vue b/src/layout/components/CarBrandSelector/index.vue
index 9ee6d50..a464908 100644
--- a/src/layout/components/CarBrandSelector/index.vue
+++ b/src/layout/components/CarBrandSelector/index.vue
@@ -1,104 +1,140 @@
 <template>
-    <div>
-      <el-cascader
-        :options="options"
-        :props="cascaderProps"
-        v-model="selectedOptions"
-        @visible-change="handleVisibleChange"
-        :filter-method="handleFilter"
-        placeholder="请选择"
-        filterable
-        :show-all-levels="false"
-      />
+    <div class="block">
+        <el-cascader v-model="selectedOptions" placeholder="请选择" :options="options" :filter-method="handleFilter"
+            :debounce="500" :show-all-levels="false" filterable clearable />
     </div>
-  </template>
-  
-  <script>
-  export default {
-    props: {
-        placeholder: {
-            type: String,
-            required: true
-        },
+
+</template>
+<script>
+import * as CarBrandSelectorApi from '@/layout/components/CarBrandSelector/Api';
+export default {
+    watch: {
+        selectedOptions(newVal, oldVal) {
+            console.log("newS is ", newVal);
+        }
     },
-    data() {
-      return {
-        options: [], // 存储级联选项数据
-        selectedOptions: [], // 存储已选择的选项
-        loading: false, // 标志是否在加载数据
-      };
-    },
-    computed: {
-      cascaderProps() {
-        return {
-          lazy: true, // 启用懒加载
-          lazyLoad: this.loadData, // 懒加载方法
-          value: 'value',
-          label: 'label',
-          children: 'children',
-          emitPath: false,
-          multiple: false // 多选模式
-        };
-      },
+    created() {
+        this.getData();
     },
     methods: {
-      // 当可见状态变化时触发
-      handleVisibleChange(visible) {
-        if (visible && this.options.length === 0) {
-          this.loadData(null, [], (options) => {
-            this.options = options;
-          });
-        }
-      },
-      // 懒加载数据方法
-      loadData(node, resolve) {
-        if (node) {
-          // 模拟异步加载子节点数据
-          setTimeout(() => {
-            const children = [
-              { value: 'child1', label: '子节点 1' },
-              { value: 'child2', label: '子节点 2' },
-            ];
-            resolve(children);
-          }, 100);
-        } else {
-          // 模拟异步加载根节点数据
-          setTimeout(() => {
-            const root = [
-              { value: 'root1', label: '根节点 1' },
-              { value: 'root2', label: '根节点 2' },
-            ];
-            resolve(root);
-          }, 100);
-        }
-      },
-      // 处理过滤方法
-      handleFilter(inputValue, path) {
-        console.log('Filtering:', inputValue);
-        // 模拟请求
-        setTimeout(() => {
-          const filteredOptions = [
-            {
-              value: 'filtered1',
-              label: `Filtered ${inputValue} 1`,
-              children: [
-                { value: 'filtered1-1', label: `Filtered ${inputValue} 1-1` },
-                { value: 'filtered1-2', label: `Filtered ${inputValue} 1-2` },
-              ],
-            },
-            {
-              value: 'filtered2',
-              label: `Filtered ${inputValue} 2`,
-              children: [
-                { value: 'filtered2-1', label: `Filtered ${inputValue} 2-1` },
-                { value: 'filtered2-2', label: `Filtered ${inputValue} 2-2` },
-              ],
-            },
-          ];
-          this.options = filteredOptions;
-        }, 1000); // 模拟延迟
-      },
+        // 处理过滤方法
+        handleFilter(node, keyword) {
+            console.log(keyword, 'Filtering:');
+            //请求相关选项
+            this.getData(keyword);
+            // this.options = 
+
+            // const filteredOptions = [
+            //   {
+            //     value: 'filtered1',
+            //     label: `Filtered ${inputValue} 1`,
+            //     children: [
+            //       { value: 'filtered1-1', label: `Filtered ${inputValue} 1-1` },
+            //       { value: 'filtered1-2', label: `Filtered ${inputValue} 1-2` },
+            //     ],
+            //   },
+            //   {
+            //     value: 'filtered2',
+            //     label: `Filtered ${inputValue} 2`,
+            //     children: [
+            //       { value: 'filtered2-1', label: `Filtered ${inputValue} 2-1` },
+            //       { value: 'filtered2-2', label: `Filtered ${inputValue} 2-2` },
+            //     ],
+            //   },
+            // ];
+            // this.options = filteredOptions;
+        },
+        getData(keyword) {
+            let param = {
+                modelName: keyword,
+            }
+            CarBrandSelectorApi.searchBrand(param).then(res => {
+                this.options = res.data
+                this.options = res.data
+               
+            });
+        },
+
+        changedOptionsForTest() {
+            this.options = [{
+                value: 'zhinan',
+                label: '指北',
+                children: [{
+                    value: 'shejiyuanze',
+                    label: '指北1',
+                    children: [{
+                        value: 'yizhi',
+                        label: '一致',
+                        children: [{
+                            value: 'sadme',
+                            label: 'how sad me'
+                        }]
+                    }, {
+                        value: 'fankui',
+                        label: '反馈'
+                    }, {
+                        value: 'xiaolv',
+                        label: '效率'
+                    }, {
+                        value: 'kekong',
+                        label: '可控'
+                    }]
+                }, {
+                    value: 'daohang',
+                    label: '指北2',
+                    children: [{
+                        value: 'cexiangdaohang',
+                        label: '侧向导航'
+                    }, {
+                        value: 'dingbudaohang',
+                        label: '顶部导航'
+                    }]
+                }]
+            },]
+        },
     },
-  };
-  </script>
-  
\ No newline at end of file
+
+    data() {
+        return {
+            selectedOptions: [], // 存储已选择的选项
+
+            options: [{
+                value: 'zhinan',
+                label: '指北',
+                children: [{
+                    value: 'shejiyuanze',
+                    label: '指北1',
+                    children: [{
+                        value: 'yizhi',
+                        label: '一致',
+                        children: [{
+                            value: 'sadme',
+                            label: 'how sad me'
+                        }]
+                    }, {
+                        value: 'fankui',
+                        label: '反馈'
+                    }, {
+                        value: 'xiaolv',
+                        label: '效率'
+                    }, {
+                        value: 'kekong',
+                        label: '可控'
+                    }]
+                }, {
+                    value: 'daohang',
+                    label: '指北2',
+                    children: [{
+                        value: 'cexiangdaohang',
+                        label: '侧向导航'
+                    }, {
+                        value: 'dingbudaohang',
+                        label: '顶部导航'
+                    }]
+                }]
+            },], //选项集合
+
+        };
+    }
+};
+</script>
\ No newline at end of file
diff --git a/src/views/base/carmain/components/CarLabelForm.vue b/src/views/base/carmain/components/CarLabelForm.vue
new file mode 100644
index 0000000..8684ee4
--- /dev/null
+++ b/src/views/base/carmain/components/CarLabelForm.vue
@@ -0,0 +1,185 @@
+<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.licenseNumber }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              车辆品牌
+            </template>
+            <!-- <dict-tag :type="DICT_TYPE.DICT_SYS_USER_SEX" :value="formData.sex" /> -->
+            {{ formData.carBrand }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              车辆型号
+            </template>
+            <!-- <dict-tag :type="DICT_TYPE.DICT_SYS_USER_SEX" :value="formData.sex" /> -->
+            {{ formData.carModel }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              车架号
+            </template>
+            {{ formData.vin }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              发动机号码
+            </template>
+            {{ formData.engineNumber }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              车辆注册日期
+            </template>
+            {{ parseTime(formData.carRegisterDate, '{y}-{m}-{d}') }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              车辆性质
+            </template>
+            <dict-tag :type="DICT_TYPE.DICT_CAR_NATURE" :value="formData.carNature" />
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              车辆类别
+            </template>
+            <dict-tag :type="DICT_TYPE.DICT_CAR_CATEGORY" :value="formData.carCategory" />
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              最近办理业务
+            </template>
+            <dict-tag :type="DICT_TYPE.DICT_CUS_BUSI_TYPE" :value="formData.recentlyHandledBusiness" />
+          </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 CarMainApi from '@/api/base/carmain';
+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(id) {
+      this.dialogVisible = true;
+      this.formLoading = true;
+      this.reset()
+      try {
+        const res = await CarMainApi.getCarMain(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 CarMainApi.setLabelList(data);
+        this.$modal.msgSuccess("设置标签成功");
+        this.dialogVisible = false;
+        this.$emit('success');
+      } finally {
+        this.formLoading = false
+      }
+    },
+
+  }
+};
+</script>