| | |
| | | </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="followupClick(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> |
| | |
| | | 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">新建</el-button> |
| | | <el-button type="primary" size="mini" @click="addNewProductClick">添加新产品</el-button> |
| | | </div> |
| | | </div> |
| | | <template> |
| | | <TableCommonView |
| | | ref="tableListRef" |
| | | ref="tableListProduct" |
| | | :table-list="productTableList" |
| | | @selCommonClick="selCommonClick" |
| | | @getSelectArray="getSelectArray" |
| | | > |
| | | <template slot="tableButton"> |
| | | <el-table-column label="操作" width="120"> |
| | | <el-table-column label="操作" width="170"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="handleClick(scope.row)" type="text" size="small">相关供应商</el-button> |
| | | <el-button @click="followupClick(scope.row)" type="text" size="small">修改</el-button> |
| | | <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> |
| | | <!-- 新建/编辑销售线索 --> |
| | | <!-- <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-rightContent-config="editSalesLeadConfig" /> --> |
| | | <AddSupplier v-if="editConfig.visible" :add-common-config="editConfig" /> |
| | | <!-- 详情 --> |
| | | <DetailSupplier v-if="commonDetail.visible" :common-detail="commonDetail" /> |
| | | <!-- 相关供应商 --> |
| | | <RaleteSupplierList v-if="raleteSupplierConfig.visible" :common-config="raleteSupplierConfig" /> |
| | | <!-- 添加新产品 --> |
| | | <AddNewProduct v-if="newProductConfig.visible" :add-common-config="newProductConfig" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <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", |
| | | props: {}, |
| | | components: { DetailSupplier }, |
| | | components: { DetailSupplier, AddSupplier, RaleteSupplierList, AddNewProduct }, |
| | | mixins: [pageMixin], |
| | | computed: {}, |
| | | data() { |
| | |
| | | title: "新建", |
| | | infomation: {} |
| | | }, |
| | | search_map: {} |
| | | raleteSupplierConfig: { |
| | | visible: false, |
| | | infomation: {} |
| | | }, |
| | | newProductConfig: { |
| | | visible: false, |
| | | title: "添加", |
| | | infomation: {} |
| | | }, |
| | | productPagerOptions: { |
| | | currPage: 1, |
| | | pageSize: 10, |
| | | totalCount: 0 |
| | | }, |
| | | supplierId: 0 |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | 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 } |
| | | ] |
| | | } |
| | |
| | | selectBox: true, |
| | | selectIndex: true, |
| | | tableColumn: [ |
| | | { label: "产品编码", prop: "name", min: 190, isSalesLeadClick: true }, |
| | | { label: "产品名称", prop: "number", 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: "number", min: 190 }, |
| | | { label: "产品名称", prop: "name", 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 = [] |
| | |
| | | } |
| | | }, |
| | | // 请求数据 |
| | | 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() {}, |
| | | // 编辑供应商 |
| | | handleClick(row) { |
| | | console.log(row) |
| | | addBtnClick() { |
| | | this.editConfig.visible = true |
| | | this.editConfig.title = "新建" |
| | | this.editConfig.infomation = { fileId: 0 } |
| | | }, |
| | | // 启用供应商 |
| | | 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) |
| | | }, |
| | | // 跟进 |
| | | followupClick(row) { |
| | | this.editConfig.visible = true |
| | | this.editConfig.title = "新建" |
| | | this.editConfig.infomation = { sales_leads_name: row.name } |
| | | this.editConfig.title = "修改" |
| | | this.editConfig.infomation = { ...row, file_name: row.contract.fileName } |
| | | }, |
| | | // 相关供应商 |
| | | raleteClick(row) { |
| | | console.log(row) |
| | | this.raleteSupplierConfig.visible = true |
| | | this.raleteSupplierConfig.infomation = { ...row } |
| | | }, |
| | | // 添加新产品 |
| | | 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.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) { |
| | |
| | | margin-right: 20px; |
| | | } |
| | | } |
| | | .sel-name { |
| | | color: $color-primary; |
| | | cursor: pointer; |
| | | } |
| | | .btn-pager { |
| | | display: flex; |
| | | .page { |