feat: 产品列表添加查看编辑按钮;弹窗根据情况展示对应标题

songshankun

2023-10-19 003a912ae0a8433797bce57181c098a54504f5d6

feat: 产品列表添加查看编辑按钮;弹窗根据情况展示对应标题

 src/views/productManage/productCategory/AddProductCategoryDialog.vue

@@ -1,14 +1,14 @@
<template>
  <div class="add-common">
    <el-dialog
      :title="editCommonConfig.title + '产品类别'"
      :title="modalTitle + '产品类别'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <!-- 头 -->
      <div slot="title" class="dialog-header">
        <span>{{ editCommonConfig.title + "产品类别" }}</span>
        <span>{{ modalTitle + "产品类别" }}</span>
        <div class="header_btns">
          <!-- <span class="btn">
            <i class="el-icon-printer"></i>
@@ -183,7 +183,8 @@
        return {
          visible: false,
          title: "新建",
          infomation: { type: [] }
          infomation: { type: [] },
          autoEdit: false,
        }
      }
    },
@@ -199,6 +200,15 @@
    productCategoryListWithDefault(){
      console.log(this.productCategoryList)
      return [{id:0,name:'请选择'},...(this.productCategoryList?? [])]
    },
    modalTitle(){
      if (this.editConfig.title === '编辑' && this.editConfig.autoEdit){
        return '编辑'
      }else if (this.editConfig.title === '编辑') {
        return !this.showEdit ? '编辑' : '查看'
      }else {
        return '新建'
      }
    }
  },
  data() {
@@ -227,6 +237,9 @@
  created() {
    this.setBottonView()
    this.getProductCount()
    if (this.editConfig.autoEdit){
      this.editClick()
    }
  },
  methods: {
    // 获取产品数量

 src/views/productManage/productCategory/index.vue

@@ -15,8 +15,20 @@
          ref="tableListRef"
          :table-list="tableList"
          :show-checkcol="false"
          @tableRowClick="tableRowClick"
        ></TableCommonView>
        >
          <template slot="tableButton">
            <el-table-column label="操作" width="90" align="center">
              <template slot-scope="scope">
                <span @click.stop="showDetail(scope.row)" class="cursor_pointer" style="margin-right: 10px">
                  <span style="color: #2a78fb">查看</span>
                </span>
                <span @click.stop="editRow(scope.row)" class="cursor_pointer">
                  <span style="color: #2a78fb">编辑</span>
                </span>
              </template>
            </el-table-column>
          </template>
        </TableCommonView>
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
@@ -45,7 +57,8 @@
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
        infomation: {},
        autoEdit: false
      }
    }
  },
@@ -93,8 +106,16 @@
      this.pagerOptions.currPage=1
      this.getData()
    },
    // 行点击
    tableRowClick(row) {
    // 查看
    showDetail(row) {
      this.editConfig.autoEdit = false
      this.editConfig.title = "编辑"
      this.editConfig.infomation = { ...row }
      this.editConfig.visible = true
    },
    // 编辑
    editRow(row){
      this.editConfig.autoEdit = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = { ...row }
      this.editConfig.visible = true