开发品牌联系人页面功能

src/views/mes/md/brand/single.vue → src/components/brandSelect/single.vue

 <template>
-  <el-dialog title="物料产品选择"
+  <el-dialog
+    title="品牌选择"
     v-if="showFlag"
     :visible.sync="showFlag"
-    :modal= false
+    :modal="false"
     width="80%"
     center
   >
     <el-row :gutter="20">
       <!--品牌数据-->
-      <el-col :span="20" :xs="24">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-col :span="20" :xs="20">
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          size="small"
+          :inline="true"
+          v-show="showSearch"
+          label-width="68px"
+        >
           <el-form-item label="品牌编码" prop="brandCode">
             <el-input
               v-model="queryParams.brandCode"
@@ -29,34 +37,124 @@
             />
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="mini"
+              @click="handleQuery"
+              >搜索</el-button
+            >
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+              >重置</el-button
+            >
           </el-form-item>
         </el-form>
 
-        <el-table v-loading="loading" :data="brandList" @current-change="handleCurrent" @row-dblclick="handleRowDbClick">
-          <el-table-column width="50" align="center" >
+        <el-table
+          v-loading="loading"
+          :data="brandList"
+          @current-change="handleCurrent"
+          @row-dblclick="handleRowDbClick"
+        >
+          <el-table-column width="50" align="center">
             <template v-slot="scope">
-                  <el-radio v-model="selectedBrandId" :label="scope.row.brandId" @change="handleRowChange(scope.row)">{{""}}</el-radio>
+              <el-radio
+                v-model="selectedBrandId"
+                :label="scope.row.brandId"
+                @change="handleRowChange(scope.row)"
+                >{{ "" }}</el-radio
+              >
             </template>
           </el-table-column>
-          <el-table-column label="品牌编码" width = "120" align="center" key="brandCode" prop="brandCode" v-if="columns[0].visible" >
+          <el-table-column
+            label="品牌编码"
+            width="120"
+            align="center"
+            key="brandCode"
+            prop="brandCode"
+            v-if="columns[0].visible"
+          >
           </el-table-column>
 
-          <el-table-column label="品牌名称" min-width="120" align="left" key="brandName" prop="brandName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="集团" align="left" key="specification" prop="specification" v-if="columns[2].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="地址" align="center" key="unitOfMeasure" prop="unitOfMeasure" v-if="columns[3].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="销售对接人" align="center" key="salesContact" prop="salesContact" v-if="columns[4].visible" :show-overflow-tooltip="true" >
+          <el-table-column
+            label="品牌名称"
+            min-width="120"
+            align="center"
+            key="brandName"
+            prop="brandName"
+            v-if="columns[1].visible"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="集团"
+            width="120"
+            align="center"
+            key="groupName"
+            prop="groupName"
+            v-if="columns[2].visible"
+            :show-overflow-tooltip="true"
+          />
+          <!-- <el-table-column
+            label="地址"
+            align="center"
+            key="address"
+            prop="address"
+            v-if="columns[3].visible"
+            :show-overflow-tooltip="true"
+          /> -->
+          <el-table-column
+            label="销售对接人"
+            align="center"
+            key="salesContact"
+            prop="salesContact"
+            v-if="columns[3].visible"
+            :show-overflow-tooltip="true"
+          >
           </el-table-column>
-          <el-table-column label="开发对接人" align="center" key="devContact" prop="devContact" v-if="columns[4].visible" :show-overflow-tooltip="true" ></el-table-column>                      
-          <el-table-column label="品牌背景" align="center" key="background" prop="background" v-if="columns[4].visible" :show-overflow-tooltip="true" ></el-table-column> 
-          <el-table-column label="经营范围" align="center" key="scope" prop="scope" v-if="columns[4].visible" :show-overflow-tooltip="true" ></el-table-column> 
-          <el-table-column label="潜力项目" align="center" key="potentialProject" prop="potentialProject" v-if="columns[4].visible" :show-overflow-tooltip="true" ></el-table-column> 
-          <el-table-column label="廉洁规定" align="center" key="integrityRegulations" prop="integrityRegulations" v-if="columns[4].visible" :show-overflow-tooltip="true" ></el-table-column> 
+          <el-table-column
+            label="开发对接人"
+            align="center"
+            key="devContact"
+            prop="devContact"
+            v-if="columns[4].visible"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <!-- <el-table-column
+            label="品牌背景"
+            align="center"
+            key="background"
+            prop="background"
+            v-if="columns[4].visible"
+            :show-overflow-tooltip="true"
+          ></el-table-column> -->
+          <el-table-column
+            label="经营范围"
+            align="center"
+            key="scope"
+            prop="scope"
+            v-if="columns[5].visible"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <el-table-column
+            label="潜力项目"
+            align="center"
+            key="potentialProject"
+            prop="potentialProject"
+            v-if="columns[6].visible"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <!-- <el-table-column
+            label="廉洁规定"
+            align="center"
+            key="integrityRegulations"
+            prop="integrityRegulations"
+            v-if="columns[4].visible"
+            :show-overflow-tooltip="true"
+          ></el-table-column> -->
         </el-table>
 
         <pagination
-          v-show="total>0"
+          v-show="total > 0"
           :total="total"
           :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize"
@@ -66,29 +164,22 @@
     </el-row>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="confirmSelect">确 定</el-button>
-        <el-button @click="showFlag=false">取 消</el-button>
+      <el-button @click="showFlag = false">取 消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
 import { listBrand } from "@/api/mes/md/brand";
-import { listAllUnitmeasure } from "@/api/mes/md/unitmeasure";
-import { genCode } from "@/api/system/autocode/rule";
-import { getToken } from "@/utils/auth";
-import { treeselect } from "@/api/mes/md/itemtype";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-
 export default {
-  name: "MdBrandSingle",
-  components: { Treeselect },
+  name: "MdBrandSelectSingle",
+  components: {},
   data() {
     return {
       showFlag: false,
       // 选中数组
       selectedBrandId: undefined,
-      selectedRows: undefined,
+      selectedRows: [],
       // 非单个禁用
       single: true,
       // 非多个禁用
@@ -98,9 +189,9 @@ export default {
       // 总条数
       total: 0,
       // 品牌表格数据
-      brandList: null,
-      // 品牌名称
-      brandName: undefined,
+      brandList: [],
+      // // 品牌名称
+      // brandName: undefined,
       defaultProps: {
         children: "children",
         label: "label",
@@ -109,22 +200,22 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        brandCode: undefined,
-        brandName: undefined,
-        brandId: 0,
+        brandCode: null,
+        brandName: null,
+        brandId: null,
       },
       // 列信息
       columns: [
         { key: 0, label: `品牌编码`, visible: true },
         { key: 1, label: `品牌名称`, visible: true },
         { key: 2, label: `集团`, visible: true },
-        { key: 3, label: `地址`, visible: true },
-        { key: 4, label: `销售对接人`, visible: true },
-        { key: 5, label: `开发对接人`, visible: true },
-        { key: 6, label: `品牌背景`, visible: true },
-        { key: 6, label: `经营范围`, visible: true },
+        // { key: 3, label: `地址`, visible: true },
+        { key: 3, label: `销售对接人`, visible: true },
+        { key: 4, label: `开发对接人`, visible: true },
+        // { key: 6, label: `品牌背景`, visible: true },
+        { key: 5, label: `经营范围`, visible: true },
         { key: 6, label: `潜力项目`, visible: true },
-        { key: 6, label: `廉洁规定`, visible: true },
+        // { key: 6, label: `廉洁规定`, visible: true },
       ],
     };
   },
@@ -135,6 +226,7 @@ export default {
   //   },
   // },
   created() {
+    console.log("日志:已进入brandSingle页面的列表查询方法"); // 在created钩子函数中输出日志
     this.getList();
   },
   methods: {
@@ -156,25 +248,8 @@ export default {
         this.loading = false;
       });
     },
-    // /** 查询分类下拉树结构 */
-    // getTreeselect() {
-    //   treeselect().then((response) => {
-    //     this.itemTypeOptions = response.data;
-    //   });
-    // },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.brandId = data.id;
-      this.handleQuery();
-    },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
@@ -187,18 +262,18 @@ export default {
         this.selectedRows = row;
       }
     },
-    handleRowDbClick(row) {
+    // 单选选中数据
+    handleRowChange(row) {
       if (row) {
         this.selectedRows = row;
-        this.$emit("onSelected", this.selectedRows);
-        this.showFlag = false;
       }
     },
-    // 单选选中数据
-    handleRowChange(row) {
-      debugger;
+    //双击选中
+    handleRowDbClick(row) {
       if (row) {
         this.selectedRows = row;
+        this.$emit("onSelected", this.selectedRows);
+        this.showFlag = false;
       }
     },
     //确定选中

src/views/mes/md/brandcontact/index.vue

@@ -194,7 +194,6 @@
       <el-table-column label="职位" align="center" prop="position" />
       <el-table-column label="邮箱地址" align="center" prop="mailbox" />
       <el-table-column label="备注" align="center" prop="remark" />
-      <!-- <el-table-column label="是否启用" align="center" prop="enableFlag" /> -->
       <el-table-column label="是否启用" align="center" prop="enableFlag">
         <template slot-scope="scope">
           <dict-tag
@@ -245,7 +244,7 @@
           <el-input v-model="form.brandId" placeholder="请输入品牌id" />
         </el-form-item> -->
         <el-row>
-          <el-col :span="8">
+          <!-- <el-col :span="8">
             <el-form-item label="品牌" prop="brandId">
               <el-select v-model="form.brandId" placeholder="请选择品牌">
                 <el-option
@@ -256,6 +255,23 @@
                 ></el-option>
               </el-select>
             </el-form-item>
+          </el-col> -->
+
+          <el-col :span="8">
+            <el-form-item label="品牌" prop="brandName">
+              <el-input v-model="form.brandName" placeholder="请选择品牌">
+                <el-button
+                  slot="append"
+                  icon="el-icon-search"
+                  @click="handleBrandSelect"
+                ></el-button>
+              </el-input>
+
+            <BrandSelect
+              ref="brSelect"
+              @onSelected="onBrandSelected"
+            ></BrandSelect>
+                        </el-form-item>
           </el-col>
 
           <el-col :span="8">
@@ -361,6 +377,7 @@
 </template>
 
 <script>
+import BrandSelect from "@/components/brandSelect/single.vue";
 import {
   listContact,
   listBrand,
@@ -372,9 +389,11 @@ import {
 
 export default {
   name: "Contact",
+  components: { BrandSelect },
   dicts: ["sys_yes_no"],
   data() {
     return {
+      optType: undefined,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -412,7 +431,18 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {},
+      rules: {
+        brandId: [{ required: true, message: "品牌不能为空", trigger: "blur" }],
+        contactName: [
+          { required: true, message: "联系人不能为空", trigger: "blur" },
+        ],
+        contactPhone: [
+          { required: true, message: "联系电话不能为空", trigger: "blur" },
+        ],
+        enableFlag: [
+          { required: true, message: "是否启用不能为空", trigger: "blur" },
+        ],
+      },
     };
   },
   created() {
@@ -480,14 +510,14 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
-      this.getBrandList();
+      // this.getBrandList();
       this.open = true;
       this.title = "添加品牌联系人";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      this.getBrandList();
+      // this.getBrandList();
       const brandContactId = row.brandContactId || this.ids;
       getContact(brandContactId).then((response) => {
         this.form = response.data;
@@ -541,6 +571,25 @@ export default {
         `contact_${new Date().getTime()}.xlsx`
       );
     },
+    //选择品牌
+    handleBrandSelect() {
+      this.$refs.brSelect.showFlag = true;
+    },
+    onBrandSelected(row) {
+      if (row != undefined && row != null) {
+        this.form.brandId = row.brandId;
+        this.form.brandCode = row.brandCode;
+        this.form.brandName = row.brandName;
+        this.form.groupName = row.groupName;
+        this.form.address = row.address;
+        this.form.salesContact = row.salesContact;
+        this.form.devContact = row.devContact;
+        this.form.background = row.background;
+        this.form.scope = row.scope;
+        this.form.potentialProject = row.potentialProject;
+        this.form.integrityRegulations = row.integrityRegulations;
+      }
+    },
   },
 };
 </script>