|
@@ -0,0 +1,240 @@
|
|
|
+<template>
|
|
|
+ <a-modal
|
|
|
+ centered
|
|
|
+ class="choosePosPriceProducts-modal"
|
|
|
+ :footer="null"
|
|
|
+ :maskClosable="false"
|
|
|
+ title="选择正价产品"
|
|
|
+ v-model="isShow"
|
|
|
+ @cancle="isShow=false"
|
|
|
+ width="80%">
|
|
|
+ <div class="table-operator">
|
|
|
+ <a-button id="choosePosPriceProducts-brand" type="primary" class="button-error" @click="openBrandModal=true">选择产品品牌</a-button>
|
|
|
+ <a-button id="choosePosPriceProducts-type" type="primary" class="button-info" @click="openTypeModal=true">选择产品分类</a-button>
|
|
|
+ <a-button id="choosePosPriceProducts-product" type="primary" class="button-success" @click="openProductsModal=true">选择产品</a-button>
|
|
|
+ </div>
|
|
|
+ <!-- 参与产品 -->
|
|
|
+ <div class="products-con">
|
|
|
+ <!-- 标题栏 -->
|
|
|
+ <div class="products-header">
|
|
|
+ <div class="products-tit">
|
|
|
+ 参与产品:<a-button id="choosePosPriceProducts-import" type="primary" class="button-info" @click="openGuideModal=true">导入产品</a-button>
|
|
|
+ </div>
|
|
|
+ <div class="products-operation">
|
|
|
+ <a-row :gutter="15">
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-select
|
|
|
+ id="choosePosPriceProducts-isLimit"
|
|
|
+ placeholder="请选择"
|
|
|
+ v-model="isLimit"
|
|
|
+ style="width: 100%;">
|
|
|
+ <a-select-option v-for="item in limitTypeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-input-number
|
|
|
+ v-if="isLimit==0"
|
|
|
+ id="choosePosPriceProducts-limitQuantity"
|
|
|
+ v-model="limitQuantity"
|
|
|
+ :min="1"
|
|
|
+ :max="999999"
|
|
|
+ :precision="0"
|
|
|
+ style="width: 85%;margin-right: 5px;"
|
|
|
+ placeholder="请输入限制数量(1~999999)"
|
|
|
+ allowClear />
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-button id="choosePosPriceProducts-import" type="primary" class="button-info" @click="handlerBulkCopy">批量复制</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <a-table
|
|
|
+ class="sTable"
|
|
|
+ ref="table"
|
|
|
+ size="small"
|
|
|
+ :rowKey="(record) => record.id"
|
|
|
+ :columns="columns"
|
|
|
+ :dataSource="loadData"
|
|
|
+ :scroll="{ x: 1200, y: 500 }"
|
|
|
+ :pagination="paginationProps"
|
|
|
+ bordered>
|
|
|
+ <!-- 起订量限制 -->
|
|
|
+ <template slot="putQty" slot-scope="text, record">
|
|
|
+ <a-select
|
|
|
+ id="choosePosPriceProducts-isLimit"
|
|
|
+ placeholder="请选择"
|
|
|
+ v-model="record.isLimit"
|
|
|
+ style="width: 100%;">
|
|
|
+ <a-select-option v-for="item in limitTypeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-input-number
|
|
|
+ v-if="record.isLimit==0"
|
|
|
+ id="choosePosPriceProducts-limitQuantity"
|
|
|
+ v-model="record.limitQuantity"
|
|
|
+ :precision="0"
|
|
|
+ :min="1"
|
|
|
+ :max="999999"
|
|
|
+ placeholder="请输入限制数量(1~999999)"
|
|
|
+ style="width: 100%;" />
|
|
|
+ </template>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <template slot="action" slot-scope="text, record">
|
|
|
+ <a-button size="small" type="primary" class="button-error" @click="handleDel(record)" id="choosePosPriceProducts-del-btn">删除</a-button>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <div class="btn-con">
|
|
|
+ <a-button
|
|
|
+ type="primary"
|
|
|
+ id="choosePosPriceProducts-submit"
|
|
|
+ size="large"
|
|
|
+ class="button-primary"
|
|
|
+ style="padding: 0 60px;">保存</a-button>
|
|
|
+ <a-button
|
|
|
+ id="choosePosPriceProducts-cancel"
|
|
|
+ size="large"
|
|
|
+ class="button-cancel"
|
|
|
+ @click="isShow=false"
|
|
|
+ style="padding: 0 60px;margin-left: 15px;">取消</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 选择产品品牌 -->
|
|
|
+ <chooseBrandModal :openModal="openBrandModal" @close="openBrandModal=false" />
|
|
|
+ <!-- 选择产品分类 -->
|
|
|
+ <chooseTypeModal :openModal="openTypeModal" @close="openTypeModal=false" />
|
|
|
+ <!-- 选择产品 -->
|
|
|
+ <chooseProductsModal :openModal="openProductsModal" @close="openProductsModal=false" />
|
|
|
+ <!-- 导入产品 -->
|
|
|
+ <importGuideModal :openModal="openGuideModal" @close="openGuideModal=false" />
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ChooseProductsModal from './chooseProductsModal.vue'
|
|
|
+import ChooseBrandModal from './chooseBrandModal.vue'
|
|
|
+import ChooseTypeModal from './chooseTypeModal.vue'
|
|
|
+import ImportGuideModal from './importGuideModal.vue'
|
|
|
+export default {
|
|
|
+ name: 'ChoosePosPriceProductsModal',
|
|
|
+ components: { ChooseProductsModal, ChooseBrandModal, ChooseTypeModal, ImportGuideModal },
|
|
|
+ props: {
|
|
|
+ openModal: { // 弹框显示状态
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ itemId: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ nowData: {
|
|
|
+ type: Object,
|
|
|
+ default: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ isShow: this.openModal, // 是否打开弹框
|
|
|
+ isLimit: undefined, // 起订量限制 批量
|
|
|
+ limitQuantity: '', // 限制数量
|
|
|
+ limitTypeList: [
|
|
|
+ { name: '按设置数量', val: 0 },
|
|
|
+ { name: '按整箱', val: 1 }
|
|
|
+ ],
|
|
|
+ // 表头
|
|
|
+ columns: [
|
|
|
+ { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
|
|
|
+ { title: '类型', dataIndex: 'origCode', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
|
|
|
+ { title: '类型名称', dataIndex: 'orisgCode', width: 220, align: 'center', customRender: function (text) { return text || '--' } },
|
|
|
+ { title: '产品名称', dataIndex: 'name', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
|
|
|
+ { title: '产品编码', dataIndex: 'code', width: 220, align: 'center', customRender: function (text) { return text || '--' } },
|
|
|
+ { title: '起订量限制', scopedSlots: { customRender: 'putQty' }, width: 220, align: 'center' },
|
|
|
+ { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center', fixed: 'right' }
|
|
|
+ ],
|
|
|
+ loadData: [],
|
|
|
+ pageNo: 1, // 分页页码
|
|
|
+ pageSize: 10, // 分页 每页多少条
|
|
|
+ paginationProps: {
|
|
|
+ showSizeChanger: true, // 是否可以改变 pageSize
|
|
|
+ total: 0, // 分页总条数
|
|
|
+ current: 1,
|
|
|
+ onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize),
|
|
|
+ onChange: (current) => this.changePage(current)
|
|
|
+ },
|
|
|
+ openBrandModal: false, // 选择产品品牌
|
|
|
+ openTypeModal: false, // 选择产品分类
|
|
|
+ openProductsModal: false, // 选择产品
|
|
|
+ openGuideModal: false // 导入产品引导
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 批量复制
|
|
|
+ handlerBulkCopy () {
|
|
|
+ const _this = this
|
|
|
+ this.$confirm({
|
|
|
+ title: '提示',
|
|
|
+ content: '批量复制会覆盖原单独设置的规则,确定要批量复制吗?',
|
|
|
+ centered: true,
|
|
|
+ onOk () {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ handleDel (record) {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 分页 一页多少条change
|
|
|
+ changePageSize (current, pageSize) {
|
|
|
+ this.pageNo = current
|
|
|
+ this.pageSize = pageSize
|
|
|
+ this.getDealerProductList()
|
|
|
+ },
|
|
|
+ // 分页 页码change
|
|
|
+ changePage (current) {
|
|
|
+ this.pageNo = current
|
|
|
+ this.getDealerProductList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 父页面传过来的弹框状态
|
|
|
+ openModal (newValue, oldValue) {
|
|
|
+ this.isShow = newValue
|
|
|
+ },
|
|
|
+ // 重定义的弹框状态
|
|
|
+ isShow (newValue, oldValue) {
|
|
|
+ if (!newValue) {
|
|
|
+ this.$emit('close')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .choosePosPriceProducts-modal{
|
|
|
+ // 参与产品
|
|
|
+ .products-con{
|
|
|
+ .products-header{
|
|
|
+ padding: 10px 15px;
|
|
|
+ color: rgba(0,0,0,.85);
|
|
|
+ background-color: #fafafa;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin: 10px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .products-operation{
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-con{
|
|
|
+ text-align: center;
|
|
|
+ margin: 30px 0 20px;
|
|
|
+ .button-cancel{
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|