haoxuan
2023-08-30 c35ccb51c02c8852e345b831ef5d2dd96c2cf500
src/views/supplierManage/supplier/index.vue
@@ -13,23 +13,49 @@
        </div>
      </div>
      <template>
        <TableCommonView
          ref="tableListRef"
          :table-list="tableList"
          @selCommonClick="selCommonClick"
          @getSelectArray="getSelectArray"
        <el-table
          ref="tableSupplier"
          border
          :data="tableList.tableInfomation"
          tooltip-effect="dark"
          style="width: 100%"
          :lazy="tableList.lazy"
          highlight-current-row
          @row-click="tableRowClick"
          :header-cell-style="{ background: '#ECF4FF', color: '#666' }"
        >
          <template slot="tableButton">
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">启用</el-button>
                <el-button @click="editClick(scope.row)" type="text" size="small">停用</el-button>
                <el-button @click="modifyClick(scope.row)" type="text" size="small">修改</el-button>
                <!-- <el-button @click="delClick(scope.row.id)" type="text" size="small">删除</el-button> -->
              </template>
            </el-table-column>
          </template>
        </TableCommonView>
          <el-table-column type="index" label="序号" width="50"> </el-table-column>
          <el-table-column
            v-for="(item, i) in tableList.tableColumn"
            :key="i"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :min-width="item.min"
            show-overflow-tooltip
            :sortable="item.sortable"
          >
            <template slot-scope="scope">
              <div v-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div>
              <span
                v-else-if="item.isCommonClick && scope.row[item.prop]"
                class="sel-name"
                @click="selCommonClick(scope.row)"
                >{{ scope.row[item.prop] }}</span
              >
              <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status === 0" @click="enableClick(scope.row, '启用')" type="text" size="small"
                >启用</el-button
              >
              <el-button v-else @click="enableClick(scope.row, '停用')" type="text" size="small">停用</el-button>
              <el-button @click="modifyClick(scope.row)" type="text" size="small">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="btn-pager">
          <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
        </div>
@@ -45,8 +71,8 @@
          class="search"
          ref="searchCommonView"
          :search-options="searchProductOptions"
          @searchClick="searchClick"
          @resetClick="resetClick"
          @searchClick="searchProductClick"
          @resetClick="resetProductClick"
        />
        <div class="add-view">
          <el-button type="primary" size="mini" @click="addNewProductClick">添加新产品</el-button>
@@ -54,7 +80,7 @@
      </div>
      <template>
        <TableCommonView
          ref="tableListRef"
          ref="tableListProduct"
          :table-list="productTableList"
          @selCommonClick="selCommonClick"
          @getSelectArray="getSelectArray"
@@ -65,13 +91,12 @@
                <el-button @click="raleteClick(scope.row)" type="text" size="small">相关供应商</el-button>
                <el-button @click="editClick(scope.row)" type="text" size="small">修改</el-button>
                <el-button @click="delClick(scope.row)" type="text" size="small">删除</el-button>
                <!-- <el-button @click="delClick(scope.row.id)" type="text" size="small">删除</el-button> -->
              </template>
            </el-table-column>
          </template>
        </TableCommonView>
        <div class="btn-pager">
          <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
          <PagerView class="page" :pager-options="productPagerOptions" v-on="pagerEvents" />
        </div>
      </template>
    </div>
@@ -88,11 +113,12 @@
<script>
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import { getSalesLeadsList, getDeleteSalesLeads } from "@/api/client/salesLead"
import { getSupplierList, changeSupplierStatus } from "@/api/supplierManage/supplier"
import DetailSupplier from "@/views/supplierManage/supplier/DetailSupplier"
import AddSupplier from "@/views/supplierManage/supplier/AddSupplier"
import RaleteSupplierList from "@/views/supplierManage/supplier/RaleteSupplierList"
import AddNewProduct from "@/views/supplierManage/supplier/AddNewProduct"
import { getProductList, deleteProduct } from "@/api/productManage/product"
export default {
  name: "SupplierManage",
@@ -125,7 +151,12 @@
        title: "添加",
        infomation: {}
      },
      search_map: {}
      productPagerOptions: {
        currPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      supplierId: 0
    }
  },
  created() {
@@ -138,14 +169,15 @@
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        ref: "tableListRef",
        tableColumn: [
          { label: "供应商编号", prop: "number", min: 190, isCommonClick: true },
          { label: "供应商名称", prop: "name", min: 130 },
          { label: "供应商类型", prop: "contact_name", min: 130 },
          { label: "所属行业", prop: "contact_phone", min: 130 },
          { label: "联系人", prop: "sales_resources", min: 130 },
          { label: "联系电话", prop: "province", min: 130 },
          { label: "状态", prop: "city", min: 130 },
          { label: "供应商类型", prop: "supplierType", min: 130 },
          { label: "所属行业", prop: "industry", min: 130 },
          { label: "联系人", prop: "contact", min: 130 },
          { label: "联系电话", prop: "phone", min: 130 },
          { label: "状态", prop: "status_name", min: 130 },
          { label: "创建时间", prop: "member_name", min: 130 }
        ]
      }
@@ -158,21 +190,17 @@
    },
    setProductTable() {
      this.productTableList = {
        tableInfomation: [
          {
            number: "aaaaa"
          }
        ],
        tableInfomation: [],
        selectBox: true,
        selectIndex: true,
        tableColumn: [
          { label: "产品编码", prop: "number", min: 190 },
          { label: "产品名称", prop: "name", min: 130 },
          { label: "产品规格", prop: "contact_name", min: 130 },
          { label: "单位", prop: "contact_phone", min: 130 },
          { label: "采购价格", prop: "sales_resources", min: 130 },
          { label: "供货时长(天)", prop: "province", min: 130 },
          { label: "物流时长(天)", prop: "city", min: 130 }
          { label: "产品规格", prop: "specifications", min: 130 },
          { label: "单位", prop: "unit", min: 130 },
          { label: "采购价格", prop: "purchasePrice", min: 130 },
          { label: "供货时长(天)", prop: "deliveryTime", min: 130 },
          { label: "物流时长(天)", prop: "shippingDuration", min: 130 }
        ]
      }
      this.searchProductOptions = []
@@ -183,56 +211,97 @@
      }
    },
    // 请求数据
    async getData() {
      await getSalesLeadsList({
        search_map: this.search_map,
    async getData(val, content) {
      this.getSupplierList(val, content)
    },
    // 供应商列表
    async getSupplierList(val, content) {
      await getSupplierList({
        [val]: content,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
      })
        .then((res) => {
          const list = res.data.list.map((item) => {
      }).then((res) => {
        console.log(res.data)
        if (res.data.code === 200) {
          const list = res.data.data.list.map((item) => {
            return {
              ...item,
              province: item.Province.name,
              city: item.City.name,
              sales_resources: item.sales_sources.name,
              member_name: item.member.username
              status_name: item.status === 0 ? "未启用" : "启用"
            }
          })
          this.tableList.tableInfomation = list || []
          this.pagerOptions.totalCount = res.data.count
        })
        .catch((err) => {
          console.log(err)
        })
          this.pagerOptions.totalCount = res.data.data.total
          if (list && list.length > 0) {
            this.supplierId = this.tableList.tableInfomation[0].ID
          } else {
            this.supplierId = 0
          }
          this.$nextTick(() => {
            this.$refs.tableSupplier.setCurrentRow(this.tableList.tableInfomation[0])
          })
          this.getProductList()
        }
      })
    },
    // 搜索
    // 产品列表
    async getProductList(val, content) {
      console.log(val, content)
      await getProductList({
        [val]: content,
        supplierId: this.supplierId,
        page: this.productPagerOptions.currPage,
        pageSize: this.productPagerOptions.pageSize
      }).then((res) => {
        console.log(res.data)
        const list = res.data.data.list.map((item) => {
          return {
            ...item
          }
        })
        this.productTableList.tableInfomation = list || []
        this.productPagerOptions.totalCount = res.data.data.total
      })
    },
    // 搜索供应商
    searchClick(val, content) {
      console.log(val, content)
      this.search_map = {
        [val.value]: content
      }
      this.getData()
      this.getSupplierList(val.value, content)
    },
    resetClick() {
      this.search_map = {}
      this.getData()
      this.getSupplierList()
    },
    // 搜索产品
    searchProductClick(val, content) {
      console.log(val, content)
      this.getProductList(val.value, content)
    },
    resetProductClick() {
      this.getProductList()
    },
    // 新建供应商
    addBtnClick() {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = { fileId: 0 }
    },
    // 编辑供应商
    handleClick(row) {
      console.log(row)
    // 启用供应商
    async enableClick(row, value) {
      let status = value === "启用" ? 1 : 0
      await changeSupplierStatus({
        id: row.ID,
        status: status
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success("状态修改成功")
          this.getData()
        }
      })
    },
    // 修改供应商
    modifyClick(row) {
      console.log(row)
      this.editConfig.visible = true
      this.editConfig.title = "修改"
      this.editConfig.infomation = { ...row }
      this.editConfig.infomation = { ...row, file_name: row.contract.fileName }
    },
    // 相关供应商
    raleteClick(row) {
@@ -244,43 +313,47 @@
    addNewProductClick() {
      this.newProductConfig.visible = true
      this.newProductConfig.title = "添加"
      this.newProductConfig.infomation = { supplierId: this.supplierId }
    },
    // 修改产品
    editClick(row) {
      console.log(row)
      this.newProductConfig.visible = true
      // this.newProductConfig.title = "修改"
      this.newProductConfig.title = "修改"
      this.newProductConfig.infomation = { ...row }
    },
    // 删除
    delClick() {
      if (this.selValueList && this.selValueList.length > 0) {
        this.$confirm("是否确认删除?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            console.log("dddd")
            getDeleteSalesLeads({ ids: this.selValueList }).then((response) => {
              if (response.code === 200) {
                this.$message.success("删除成功")
                this.getData()
              } else {
                this.$message.warning("删除失败")
              }
            })
    delClick(row) {
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log("dddd")
          deleteProduct({ id: row.ID }).then((response) => {
            if (response.code === 200) {
              this.$message.success("删除成功")
              this.getProductList()
            } else {
              this.$message.warning("删除失败")
            }
          })
          .catch(() => {})
      } else {
        this.$message.warning("请至少选择一条记录")
      }
        })
        .catch(() => {})
    },
    getSelectArray(val) {
      console.log(val)
      this.selValueList = []
      const list = val.map((item) => {
        return item.id
      })
      this.selValueList = list
    },
    tableRowClick(row) {
      console.log(row)
      this.supplierId = row.ID
      this.getProductList()
    },
    // 详情
    selCommonClick(row) {
@@ -305,6 +378,10 @@
        margin-right: 20px;
      }
    }
    .sel-name {
      color: $color-primary;
      cursor: pointer;
    }
    .btn-pager {
      display: flex;
      .page {