产品类别列表及对应产品列表、新建页面和FromBtnsView公共组件开发

yangfeng

2023-09-15 d1fad869b261b62ab6037e5c0f641ff63d50f24b

产品类别列表及对应产品列表、新建页面和FromBtnsView公共组件开发

 src/assets/style/index.scss

@@ -189,5 +189,8 @@
    height: calc(100% - 120px);
    background: #fff;
    border-radius: 12px;
    .table {
      height: calc(100% - 55px);
    }
  }
}

 src/components/index.js

@@ -3,8 +3,9 @@
import PagerView from "@/components/makepager/pager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import StatusCommonView from "@/components/makepager/StatusCommonView"
import FormBtnsView from "@/components/makepager/FormBtnsView"

const components = [SearchCommonView, PagerView, TableCommonView, StatusCommonView]
const components = [SearchCommonView, PagerView, TableCommonView, StatusCommonView, FormBtnsView]
components.forEach((component) => {
  Vue.component(component.name, component)
})

 src/components/layout/components/appsidebar/index.vue

@@ -29,15 +29,15 @@
            <span>产品</span>
          </template>
          <el-menu-item index="/productManage/product">产品</el-menu-item>
          <el-menu-item index="/purchaseManage/quality">产品类别</el-menu-item>
          <el-menu-item index="/productManage/productCategory">产品类别</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting icon"></i>
            <span>操作</span>
          </template>
          <el-menu-item index="/productManage/product">补货</el-menu-item>
          <el-menu-item index="/productManage/product">库存调整</el-menu-item>
          <!-- <el-menu-item index="/productManage/product">补货</el-menu-item>
          <el-menu-item index="/productManage/product">库存调整</el-menu-item> -->
          <el-menu-item index="/productManage/product">调拨</el-menu-item>
          <el-menu-item index="/productManage/product">报废</el-menu-item>
        </el-submenu>

 src/components/makepager/FormBtnsView.vue

New file
@@ -0,0 +1,153 @@
<template>
  <div class="content-number">
    <div v-if="!showProduct && !showWarehouse && !showPosition" class="sub-number">
      <div class="left"><i class="el-icon-s-fold"></i></div>
      <div class="right">
        <div class="right-label">{{ 0 }}</div>
        <div class="right-label">额外的价格</div>
      </div>
    </div>
    <div v-if="!showProduct && !showWarehouse && !showPosition" class="sub-number">
      <div class="left"><i class="el-icon-present"></i></div>
      <div class="right">
        <div class="right-label">{{ "0.00" + "件" }}</div>
        <div class="right-label">在手</div>
      </div>
    </div>
    <div v-if="!showProduct && !showWarehouse && !showPosition" class="sub-number">
      <div class="left"><i class="el-icon-present"></i></div>
      <div class="right">
        <div class="right-label">{{ "0.00" + "件" }}</div>
        <div class="right-label">预测</div>
      </div>
    </div>
    <div
      v-if="!showProduct && !showWarehouse && !showPosition"
      class="sub-number"
      @click="inOutBoundClick"
      style="cursor: pointer"
    >
      <div class="left icon-view"><i class="el-icon-sort"></i></div>
      <div class="right">
        <div class="right-label">{{ "进: " + 0 }}</div>
        <div class="right-label">{{ "出: " + 0 }}</div>
      </div>
    </div>
    <div v-if="!showProduct && !showWarehouse && !showPosition" class="sub-number">
      <div class="left"><i class="el-icon-refresh"></i></div>
      <div class="right">
        <div class="right-label">{{ 0 }}</div>
        <div class="right-label">重订货规则</div>
      </div>
    </div>
    <div v-if="showProduct" class="sub-number right-border" @click="productClick" style="cursor: pointer">
      <div class="left"><i class="el-icon-s-fold"></i></div>
      <div class="right">
        <div class="right-label">{{ 0 }}</div>
        <div class="right-label">产品</div>
      </div>
    </div>
    <div v-if="!showWarehouse" class="sub-number">
      <div class="left"><i class="el-icon-help"></i></div>
      <div class="right">
        <div class="right-one">上架规则</div>
      </div>
    </div>
    <div v-if="!showProduct && !showWarehouse && !showPosition" class="sub-number">
      <div class="left"><i class="el-icon-s-data"></i></div>
      <div class="right">
        <div class="right-label">{{ "0.00" + "件" }}</div>
        <div class="right-label">已售</div>
      </div>
    </div>
    <div v-if="!showProduct && !showWarehouse && !showPosition" class="sub-number">
      <div class="left"><i class="el-icon-bank-card"></i></div>
      <div class="right">
        <div class="right-label">{{ "0.00" + "件" }}</div>
        <div class="right-label">已采购</div>
      </div>
    </div>
    <div v-if="showPosition" class="sub-number">
      <div class="left"><i class="el-icon-help"></i></div>
      <div class="right">
        <div class="right-one">当前库存</div>
      </div>
    </div>
    <div v-if="showWarehouse" class="sub-number">
      <div class="left"><i class="el-icon-help"></i></div>
      <div class="right">
        <div class="right-one">路线</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "FormBtnsView",
  props: {
    showProduct: {
      type: Boolean,
      default: false
    },
    showWarehouse: {
      type: Boolean,
      default: false
    },
    showPosition: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    // 进出
    inOutBoundClick() {
      this.$emit("inOutBoundClick")
    },
    // 产品
    productClick() {
      this.$emit("productClick")
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content-number {
  display: flex;
  justify-content: right;
  height: 44px;
  border-bottom: 1px solid #e9e9e9;
  font-size: 13px;
  .sub-number {
    width: 12.5%;
    border-right: 1px solid #e9e9e9;
    display: flex;
    padding: 3px 9px;
    .left {
      margin-top: 3px;
      font-size: 22px;
      font-weight: 600;
    }
    .icon-view {
      transform: rotate(270deg);
    }
    .right {
      margin-left: 6px;
      .right-label {
        color: #495057;
      }
      .right-one {
        height: 38px;
        line-height: 38px;
      }
    }
  }
  .right-border {
    border-left: 1px solid #e9e9e9;
  }
}
</style>

 src/components/makepager/StatusCommonView.vue

@@ -60,13 +60,13 @@
    }
  },
  data() {
    return {
      delClick() {
        this.$emit("delClick")
      }
    }
    return {}
  },
  methods: {}
  methods: {
    delClick() {
      this.$emit("delClick")
    }
  }
}
</script>


 src/components/makepager/TableCommonView.vue

@@ -79,7 +79,7 @@
      </div>
    </el-table>
    <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
    <div class="styleBtn">
    <div v-if="showCheckcol" class="styleBtn">
      <i @click="checkcol()" class="label">...</i>
      <el-checkbox-group v-model="showcolList" v-show="iscolopen" class="checkbox-group" @change="selCeckBoxList">
        <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox>
@@ -133,6 +133,10 @@
      default: () => {
        return {}
      }
    },
    showCheckcol: {
      type: Boolean,
      default: true
    }
  },
  data() {

 src/router/index.js

@@ -97,7 +97,12 @@
const router = createRouter()

router.afterEach((to, from, next) => {
  if ((to.path === "/overview/overviewList" || to.path === "/reportForm/inOutboundDetail") && to.query.name) {
  if (
    (to.path === "/overview/overviewList" ||
      to.path === "/reportForm/inOutboundDetail" ||
      to.path === "/productManage/productList") &&
    to.query.name
  ) {
    console.log(from, next)
    to.meta.title = to.query.name
    document.title = to.meta.title

 src/router/product/index.js

@@ -2,6 +2,8 @@

const product = (resolve) => require(["@/views/productManage/product/index"], resolve) // 产品
const inOutboundDetail = (resolve) => require(["@/views/reportForm/inboundOutboundDetail/index"], resolve) // 出入库明细
const productCategory = (resolve) => require(["@/views/productManage/productCategory/index"], resolve) // 产品类别
const productList = (resolve) => require(["@/views/productManage/productCategory/ProductList"], resolve) // 产品类别-产品

const appconfig = [
  {
@@ -13,12 +15,28 @@
    }
  },
  {
    path: "/productManage/productCategory",
    name: "productCategory",
    component: productCategory,
    meta: {
      title: "产品类别"
    }
  },
  {
    path: "/reportForm/inOutboundDetail",
    name: "inOutboundDetail",
    component: inOutboundDetail,
    meta: {
      title: "出入库明细"
    }
  },
  {
    path: "/productManage/productList",
    name: "productList",
    component: productList,
    meta: {
      title: "产品"
    }
  }
]


 src/views/overview/OverviewListView.vue

@@ -10,12 +10,14 @@
      />
    </div>
    <div class="list-view">
      <TableCommonView
        ref="tableListRef"
        :table-list="tableList"
        @selTableCol="selTableCol"
        @tableRowClick="tableRowClick"
      ></TableCommonView>
      <div class="table">
        <TableCommonView
          ref="tableListRef"
          :table-list="tableList"
          @selTableCol="selTableCol"
          @tableRowClick="tableRowClick"
        ></TableCommonView>
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
@@ -208,19 +210,4 @@
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
// .rightContent {
//   height: 100%;
//   background: #e6ecf2;
//   padding: 10px;
//   .top {
//     margin-bottom: 20px;
//     height: 60px;
//     background: #fff;
//     border-radius: 8px;
//   }
//   .list-view {
//     height: calc(100% - 120px);
//   }
// }
</style>
<style lang="scss" scoped></style>

 src/views/productManage/product/AddProductDialog.vue

@@ -38,63 +38,7 @@
        </div>

        <div class="basic-info">
          <div class="content-number">
            <div class="sub-number">
              <div class="left"><i class="el-icon-s-fold"></i></div>
              <div class="right">
                <div class="right-label">{{ 0 }}</div>
                <div class="right-label">额外的价格</div>
              </div>
            </div>
            <div class="sub-number">
              <div class="left"><i class="el-icon-present"></i></div>
              <div class="right">
                <div class="right-label">{{ "0.00" + "件" }}</div>
                <div class="right-label">在手</div>
              </div>
            </div>
            <div class="sub-number">
              <div class="left"><i class="el-icon-present"></i></div>
              <div class="right">
                <div class="right-label">{{ "0.00" + "件" }}</div>
                <div class="right-label">预测</div>
              </div>
            </div>
            <div class="sub-number" @click="inOutBoundClick" style="cursor: pointer">
              <div class="left icon-view"><i class="el-icon-sort"></i></div>
              <div class="right">
                <div class="right-label">{{ "进: " + 0 }}</div>
                <div class="right-label">{{ "出: " + 0 }}</div>
              </div>
            </div>
            <div class="sub-number">
              <div class="left"><i class="el-icon-refresh"></i></div>
              <div class="right">
                <div class="right-label">{{ 0 }}</div>
                <div class="right-label">重订货规则</div>
              </div>
            </div>
            <div class="sub-number">
              <div class="left"><i class="el-icon-help"></i></div>
              <div class="right">
                <div class="right-one">上架规则</div>
              </div>
            </div>
            <div class="sub-number">
              <div class="left"><i class="el-icon-s-data"></i></div>
              <div class="right">
                <div class="right-label">{{ "0.00" + "件" }}</div>
                <div class="right-label">已售</div>
              </div>
            </div>
            <div class="sub-number">
              <div class="left"><i class="el-icon-bank-card"></i></div>
              <div class="right">
                <div class="right-label">{{ "0.00" + "件" }}</div>
                <div class="right-label">已采购</div>
              </div>
            </div>
          </div>
          <FormBtnsView @inOutBoundClick="inOutBoundClick" />
          <div class="basic-info-view">
            <el-row>
              <el-col :span="20">
@@ -464,6 +408,7 @@

<script>
import CommonFormTableView from "@/components/makepager/CommonFormTableView"

let inputElement = null
export default {
  name: "AddProductDialog",

 src/views/productManage/productCategory/AddProductCategoryDialog.vue

New file
@@ -0,0 +1,349 @@
<template>
  <div class="add-common">
    <el-dialog
      :title="editCommonConfig.title + '产品类别'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <!-- 头 -->
      <div slot="title" class="dialog-header">
        <span>{{ editCommonConfig.title + "产品类别" }}</span>
        <div class="header_btns">
          <!-- <span class="btn">
            <i class="el-icon-printer"></i>
            <span>打印</span>
          </span> -->
          <span class="btn" style="margin-left: 15px">
            <i class="el-icon-s-tools"></i>
            <span>动作</span>
          </span>
          <el-button v-if="showEdit" plain size="mini" style="margin-left: 15px" @click="editClick">编辑</el-button>
        </div>
      </div>
      <!-- 内容 -->
      <el-form
        ref="form"
        :model="editConfig.infomation"
        :rules="rules"
        label-position="left"
        label-width="110px"
        size="mini"
        style="height: 60vh; overflow-x: hidden"
      >
        <div class="basic-info">
          <FormBtnsView :showProduct="true" @productClick="productClick" />
          <div class="basic-info-view">
            <el-row>
              <el-col :span="24">
                <div style="margin-left: 20px">类别</div>
                <el-form-item label="" prop="client_name" label-width="20px">
                  <el-input
                    v-model="editConfig.infomation.client_name"
                    placeholder=""
                    :disabled="!showFooter"
                    style="width: 85%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="上级品类" prop="client_name" style="margin-left: 20px">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    placeholder="请选择"
                    size="mini"
                    style="width: 45%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="bottom">
            <div class="purchase-view">
              <div class="left">
                <div class="second-label">物流</div>
                <el-form-item label="路线" prop="client_name" style="margin-left: 20px">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    multiple
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="强制下架策略" prop="client_name" style="margin-left: 20px">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    multiple
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <div class="second-label">库存计价</div>
                <el-form-item label="成本方法" prop="client_name" style="margin-left: 20px">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    multiple
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="库存计价" prop="client_name" style="margin-left: 20px">
                  <el-select
                    v-model="editConfig.infomation.memberId"
                    multiple
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <!-- 尾 -->
      <div v-if="showFooter" slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" size="small" @click="editConfig.visible = false">保并提交审批</el-button> -->
        <el-button type="primary" size="small" @click="saveClick('form')">保存</el-button>
        <el-button size="small" @click="editConfig.visible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AddProductCategoryDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: { type: [] }
        }
      }
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      dialogWidth: "50%",
      editConfig: this.editCommonConfig,
      rules: {
        client_name: [{ required: true, message: "请选择客户名称", trigger: "change" }],
        number: [{ required: true, message: "请输入退款单编号", trigger: "blur" }],
        refundDate: [{ required: true, message: "请选择退款日期", trigger: "change" }],
        memberId: [{ required: true, message: "请选择销售负责人", trigger: "change" }],
        sale_return_nunber: [{ required: true, message: "请选择销售退货单", trigger: "change" }]
      },
      memberOptions: [],
      paymentTypeListOptions: [],
      showButton: true,
      showEdit: false, // 是否显示编辑按钮
      isDelClick: false, // 删除按钮是否可点击
      showFooter: false // 是否显示取消保存
    }
  },
  created() {
    this.setBottonView()
  },
  methods: {
    // 设置删除/打印/编辑是否显示
    setBottonView() {
      if (this.editConfig.title === "新建") {
        this.showButton = false
        this.showEdit = false
        this.showFooter = true
      } else {
        this.showEdit = true
        this.showFooter = false
      }
    },
    // 关闭
    handleClose() {
      this.editConfig.visible = false
    },
    // 编辑
    editClick() {
      this.showEdit = false
      this.showButton = false
      this.showFooter = true
    },
    // 保存
    saveClick() {},
    // 删除
    delClick() {},
    // 产品
    productClick() {
      this.$router.push({ path: "/productManage/productList", query: { name: "产品" } })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.dialog-header {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  .header_btns {
    margin-left: auto;
    margin-right: 60px;
    .btn {
      cursor: no-drop;
    }
  }
}
.content-btn {
  height: 37px;
  line-height: 37px;
  padding-left: 20px;
  border-bottom: 1px solid #e9e9e9;
}
.basic-info {
  height: calc(100% - 80px);
  overflow: auto;
  margin: 20px;
  border: 1px solid #dcdfe6;
  box-shadow: inset 0 0 2px #dee2e6;
  -moz-box-shadow: inset 0 0 2px #dee2e6;
  -webkit-box-shadow: inset 0 0 2px #dee2e6;
  .content-number {
    display: flex;
    justify-content: right;
    height: 44px;
    border-bottom: 1px solid #e9e9e9;
    font-size: 13px;
    .sub-number {
      width: 12.5%;
      border-right: 1px solid #e9e9e9;
      display: flex;
      padding: 3px 9px;
      .left {
        margin-top: 3px;
        font-size: 22px;
        font-weight: 600;
      }
      .icon-view {
        transform: rotate(270deg);
      }
      .right {
        margin-left: 6px;
        .right-label {
          color: #495057;
        }
        .right-one {
          height: 38px;
          line-height: 38px;
        }
      }
    }
  }
  .basic-info-view {
    margin-top: 20px;
    .upload {
      position: relative;
      width: 90px;
      height: 90px;
      margin-left: 40px;
      border: 1px dotted #d9d9d9;
      border-radius: 4px;
      .upload-icon {
        position: absolute;
        top: 40%;
        right: 43%;
      }
    }
  }
  .purchase-view {
    display: flex;
    .left {
      width: 50%;
    }
    .right {
      width: 50%;
    }
  }
  .second-label {
    margin-left: 20px;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 10px;
  }
  .list-item {
    width: 300px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
::v-deep {
  .el-dialog__headerbtn {
    position: absolute;
    top: 18px;
  }
  .el-button {
    &:hover {
      border: 1px solid #dcdfe6;
      color: #333;
    }
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    margin-left: 20px;
  }
  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    font-size: 13px;
  }
}
</style>

 src/views/productManage/productCategory/ProductList.vue

New file
@@ -0,0 +1,218 @@
<template>
  <div class="rightContent">
    <div class="top">
      <SearchCommonView
        :add-title="'新建'"
        :placeholder="'请输入产品名称'"
        :amount-view="false"
        @addCommonClick="addBtnClick"
        @searchClick="searchClick"
      />
    </div>
    <div class="list-view">
      <div class="table">
        <TableCommonView
          ref="tableListRef"
          :table-list="tableList"
          @selTableCol="selTableCol"
          @tableRowClick="tableRowClick"
        >
        </TableCommonView>
      </div>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <!-- 新建/编辑 -->
    <AddProductDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

<script>
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import { getProductList } from "@/api/product/product"
// import DetailProduct from "@/views/productManage/product/DetailProduct"
import AddProductDialog from "@/views/productManage/product/AddProductDialog"

export default {
  name: "ProductList",
  props: {},
  components: { AddProductDialog },
  mixins: [pageMixin],
  computed: {},
  data() {
    return {
      tableList: {},
      showcol: ["内部参考", "负责人", "产品标签", "销售价格", "成本", "在库数量", "预测数量", "计量单位"],
      searchOptions: [],
      commonDetail: {
        visible: false,
        title: "新建",
        infomation: {}
      },
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      },
      isIconIndex: "1", // 1 图标 2 列表
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    }
  },
  created() {
    this.setTable()
    this.getData()
  },
  methods: {
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectBox: true,
        showcol: this.showcol,
        allcol: [],
        tableColumn: this.setTableColumn(this.showcol)
      }
      let allcol = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        if (!this.tableList.tableColumn[i].default) {
          const label = this.tableList.tableColumn[i].label
          allcol.push(label)
        }
      }
      this.tableList.allcol = allcol
    },
    setTableColumn(showcol) {
      let tableColumn = [
        {
          label: "产品名称",
          prop: "id",
          isShowColumn: true,
          default: true
        },
        {
          label: "内部参考",
          prop: "deviceName",
          isShowColumn: showcol.includes("内部参考"),
          default: false
        },
        {
          label: "负责人",
          prop: "id",
          isShowColumn: true,
          default: true
        },
        {
          label: "产品标签",
          prop: "deviceId",
          isShowColumn: showcol.includes("产品标签"),
          default: false
        },
        {
          label: "条码",
          prop: "shopName",
          isShowColumn: showcol.includes("条码"),
          default: false
        },
        {
          label: "公司",
          prop: "shopName",
          isShowColumn: showcol.includes("公司"),
          default: false
        },
        {
          label: "销售价格",
          prop: "faultLevel",
          isShowColumn: showcol.includes("销售价格"),
          default: false
        },
        {
          label: "成本",
          prop: "status",
          isShowColumn: showcol.includes("成本"),
          default: false,
          status: true
        },
        {
          label: "产品类别",
          prop: "faultTime",
          isShowColumn: showcol.includes("产品类别"),
          default: false
        },
        {
          label: "产品类型",
          prop: "shopName",
          isShowColumn: showcol.includes("产品类型"),
          default: false
        },
        {
          label: "在库数量",
          prop: "faultLevel",
          isShowColumn: showcol.includes("在库数量"),
          default: false
        },
        {
          label: "预测数量",
          prop: "status",
          isShowColumn: showcol.includes("预测数量"),
          default: false,
          status: true
        },
        {
          label: "计量单位",
          prop: "faultTime",
          isShowColumn: showcol.includes("计量单位"),
          default: false
        }
      ]
      return tableColumn
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setTableColumn(val)
    },
    // 请求数据
    async getData(val, content) {
      await getProductList({
        [val]: content,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
      }).then((res) => {
        if (res.data.code === 200) {
          const list = res.data.data.list.map((item) => {
            return {
              ...item,
              supplierNumber: item.supplier.number
            }
          })
          this.tableList.tableInfomation = list || []
          this.pagerOptions.totalCount = res.data.data.total
        }
      })
    },
    // 搜索
    searchClick(val) {
      console.log(val)
      this.getData()
    },
    // 新建
    addBtnClick() {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
    },
    // 行点击
    tableRowClick(row) {
      console.log(row)
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = { ...row }
    },
    // 切换列表展现形式
    selIconSwitchClick(value) {
      this.isIconIndex = value
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped></style>

 src/views/productManage/productCategory/index.vue

New file
@@ -0,0 +1,132 @@
<template>
  <div class="rightContent">
    <div class="top">
      <SearchCommonView
        :add-title="'新建'"
        :placeholder="'请输入单号'"
        :amount-view="false"
        @addCommonClick="addBtnClick"
        @searchClick="getList"
      />
    </div>
    <div class="list-view">
      <TableCommonView
        ref="tableListRef"
        :table-list="tableList"
        :show-checkcol="false"
        @tableRowClick="tableRowClick"
      ></TableCommonView>
      <div class="btn-pager">
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <!-- 新建/编辑 -->
    <AddProductCategoryDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

<script>
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import { getProductList } from "@/api/product/product"
// import DetailProduct from "@/views/productManage/product/DetailProduct"
import AddProductCategoryDialog from "@/views/productManage/productCategory/AddProductCategoryDialog"

export default {
  name: "ProductCategory",
  props: {},
  components: { AddProductCategoryDialog },
  mixins: [pageMixin],
  computed: {},
  data() {
    return {
      tableList: {},
      searchOptions: [],
      commonDetail: {
        visible: false,
        title: "新建",
        infomation: {}
      },
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
    this.getData()
  },
  methods: {
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectBox: true,
        tableColumn: [
          {
            label: "产品类型",
            prop: "id",
            isShowColumn: true,
            default: true
          }
        ]
      }
    },
    // 请求数据
    async getData(val, content) {
      await getProductList({
        [val]: content,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
      }).then((res) => {
        if (res.data.code === 200) {
          const list = res.data.data.list.map((item) => {
            return {
              ...item,
              supplierNumber: item.supplier.number,
              status: "就绪",
              preTime: "2023-09-04 11:20:00"
            }
          })
          this.tableList.tableInfomation = list || []
          this.pagerOptions.totalCount = res.data.data.total
        }
      })
    },
    // 搜索
    getList(val) {
      console.log(val)
    },
    // 行点击
    tableRowClick(row) {
      console.log(row)
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = { ...row }
    },
    // 新建
    addBtnClick() {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
// .rightContent {
//   height: 100%;
//   background: #e6ecf2;
//   padding: 10px;
//   .top {
//     margin-bottom: 20px;
//     height: 60px;
//     background: #fff;
//     border-radius: 8px;
//   }
//   .list-view {
//     height: calc(100% - 120px);
//   }
// }
</style>