src/api/product/productAttr.js

@@ -75,6 +75,18 @@ export default {
       data
     })
   },
+  getChannels() {
+    return request({
+      url: `/${service_name}/mallProductSiteRelation/getAllChannels`,
+      method: 'get',
+    })
+  },
+  getCheckedSites(productId) {
+    return request({
+      url: `/${service_name}/mallProductSiteRelation/getCheckedSites/${productId}`,
+      method: 'get',
+    })
+  },
   brandGetAll(data) {
     return request({
       url: `/${service_name}/mallProductBrands/getAll`,

src/views/product/productAdd/components/OilStationSelection.vue

@@ -1,30 +1,94 @@
 <template>
-  <div>
+  <div class="station-select">
     <el-form ref="artFrom" :model="page" label-width="80px" label-position="right" class="tabform"
              @submit.native.prevent inline>
       <el-form-item label="输入搜索">
         <el-input clearable v-model="page.params.siteName" placeholder="请输入油站名称"
                   class="form_content_width"></el-input>
       </el-form-item>
+      <el-form-item label="油站渠道">
+        <el-select v-model="page.params.channel" clearable style="width:100%">
+          <el-option
+            v-for="(item,index) in channelList"
+            :key="index"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="省市区">
+        <el-cascader
+          v-model="page.params.addrCodes"
+          placeholder="请选择省市区"
+          style="width: 100%"
+          :options="areaTree"
+          :props="{checkStrictly: true,value:'id', label:'areaName', children:'childList'}"
+          filterable
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="油站品牌">
+        <el-select v-model="page.params.siteBrand" clearable style="width:100%">
+          <el-option label="中国石油" :value="1" />
+          <el-option label="中国石化" :value="2" />
+          <el-option label="壳牌" :value="3" />
+          <el-option label="民营" :value="4" />
+          <el-option label="中海油" :value="5" />
+          <el-option label="京博" :value="6" />
+          <el-option label="中化石油" :value="7" />
+          <el-option label="山东高速" :value="9" />
+          <el-option label="其他" :value="8" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="油站账户" prop="siteChannelAccountId">
+        <el-select v-model="page.params.siteChannelAccountId" remote filterable clearable placeholder="请选择油站账户" style="width: 100%">
+          <el-option v-for="item in restaurants" :key="item.id" :label="item.value + '-' + item.id" :value="item.id">
+            {{ item.value }}-<span style="color: #bbbbbb">{{ item.id }}</span>
+          </el-option>
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="userSearchs">查询</el-button>
-        <el-button type="primary" @click="submit">确定选择</el-button>
       </el-form-item>
     </el-form>
-    <el-table max-height="500" @selection-change="selectionChange" v-loading="loading" ref="table" :data="tableList"
-              :row-key="(row) => row.siteId" highlight-current-row empty-text="暂无数据" class="mt14">
-      <el-table-column type="selection" reserve-selection width="55">
-      </el-table-column>
-      <el-table-column label="油站名称" prop="siteName"></el-table-column>
-      <el-table-column label="渠道" prop="channel"></el-table-column>
-    </el-table>
-    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-                   :current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize"
-                   layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
+    <el-row :gutter="24" class="table-area">
+      <el-col  :span="11">
+        <h3>待选择</h3>
+        <el-table :height="tableHeight" v-loading="loading" ref="table" :data="tableList"
+                  :row-key="(row) => row.siteId" highlight-current-row empty-text="暂无数据" class="mt14">
+          <el-table-column type="selection" reserve-selection width="55">
+          </el-table-column>
+          <el-table-column label="油站名称" prop="siteName" width="200"></el-table-column>
+          <el-table-column align="center"  label="渠道" prop="channel" width="120"></el-table-column>
+          <el-table-column header-align="center" label="地址" prop="address"></el-table-column>
+        </el-table>
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                       :current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize"
+                       layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
+      </el-col>
+      <el-col  :span="2" class="transfer-button">
+        <el-button type="primary" @click="delSite" class="el-icon-back"></el-button>
+        <el-button type="primary" @click="addSite" class="el-icon-right"></el-button>
+      </el-col>
+      <el-col  :span="11">
+        <h3>已选择</h3>
+        <el-table :height="tableHeight" v-loading="checkedLoading" ref="checkedTable" :data="checkedSites"
+                  :row-key="(row) => row.siteId" highlight-current-row empty-text="暂无数据" class="mt14">
+          <el-table-column type="selection" reserve-selection width="55">
+          </el-table-column>
+          <el-table-column label="油站名称" prop="siteName" width="200"></el-table-column>
+          <el-table-column align="center"  label="渠道" prop="channel" width="120"></el-table-column>
+          <el-table-column header-align="center" label="地址" prop="address"></el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+    <el-button type="primary" @click="submit" class="fr">确定</el-button>
   </div>
 </template>
 <script>
 import productApi from '@/api/product/productAttr.js'
+import dictAreaApi from '@/api/base/areaCode.js'
+import financeApi from '@/api/user/oilTerminalMarket.js'
 
 export default {
   name: 'OilStationSelection',
@@ -36,50 +100,87 @@ export default {
     selectAttrId: {
       type: String,
       default: () => ''
-    }
+    },
+    productId: {
+      type: String,
+      default: () => null
+    },
   },
   data() {
     return {
-      selectionList: [],
+      tableHeight: document.documentElement.clientHeight - 550,
+      // selectionList: [],
       loading: false,
+      checkedLoading: false,
       tableList: [],
+      areaTree: [],
+      restaurants: [],
       page: {
         'currentPage': 1,
         'pageSize': 10,
         'totalCount': 0,
         'params': {
-          'siteName': ''
+          addrCodes:[]
         }
-      }
-    }
-  },
-  watch: {
-    OilStationSelectionList: {
-      handler(n, o) {
-        this.$refs.table.clearSelection()
-        n.forEach(element => {
-          this.$refs.table.toggleRowSelection(element)
-        })
       },
-      deep: true
+      channelList:[],
+      checkedSites:[],
     }
   },
+  // watch: {
+  //   OilStationSelectionList: {
+  //     handler(n, o) {
+  //       this.$refs.table.clearSelection()
+  //       n.forEach(element => {
+  //         this.$refs.table.toggleRowSelection(element)
+  //       })
+  //     },
+  //     deep: true
+  //   }
+  // },
   created() {
     this.init()
+    this.getAreaData()
+    this.getChannlList()
+    this.getAccountNames()
+    this.getCheckedSites()
   },
   methods: {
     submit() {
       this.$emit('submit', this.getSelectionList())
     },
     getSelectionList() {
-      return this.selectionList
-    },
-    selectionChange(e) {
-      this.selectionList = e
+      return this.checkedSites
     },
     userSearchs() {
       this.getByPage()
     },
+    addSite(){
+      console.log(this.$refs.table.selection)
+      let arr = [...this.$refs.table.selection]
+      let arrSiteName = []
+      arr.forEach(v=>{
+        if (this.checkedSites.some(f=>f.siteId===v.siteId)){
+          arrSiteName.unshift(v.siteName)
+        }else {
+          this.checkedSites.push(v)
+        }
+      })
+      if (arrSiteName&&arrSiteName.length>0){
+        this.$message.warning('部分站点出现重复，已自动为您过滤：【'+arrSiteName.join('、')+'】')
+      }
+      this.$refs.table.clearSelection()
+    },
+    delSite(){
+      console.log(this.$refs.checkedTable.selection)
+      // 获取当前选中的行
+      const selectedRows = this.$refs.checkedTable.selection;
+      // 使用filter方法创建一个新数组，不包含已删除的元素
+      this.checkedSites = this.checkedSites.filter(site => {
+        return !selectedRows.some(row => row.siteId === site.siteId);
+      });
+      this.$refs.checkedTable.clearSelection()
+    },
     isStrictPromise(value) {
       return !!value
         && typeof value === 'object'
@@ -95,7 +196,30 @@ export default {
       }
 
     },
+    getAreaData(){
+      dictAreaApi.getTree().then(res => {
+        this.areaTree = res.data
+      })
+    },
     getByPage() {
+      if (this.page.params.addrCodes&&this.page.params.addrCodes.length>0){
+        this.page.params.provinceCode = this.page.params.addrCodes[0]
+        if (this.page.params.addrCodes.length>1){
+          this.page.params.areaCode = this.page.params.addrCodes[1]
+          if (this.page.params.addrCodes.length>2){
+            this.page.params.cityCode = this.page.params.addrCodes[2]
+          }else {
+            this.page.params.cityCode = null
+          }
+        }else {
+          this.page.params.areaCode = null
+          this.page.params.cityCode = null
+        }
+      }else {
+        this.page.params.provinceCode = null
+        this.page.params.areaCode = null
+        this.page.params.cityCode = null
+      }
       this.loadingFn(productApi.getAllSites(this.page).then(res => {
         if (res.code === 20000) {
           this.tableList = res.data.list
@@ -115,6 +239,15 @@ export default {
       this.page.pageSize = val
       this.getByPage()
     },
+    // 获取账户名称键值对
+    getAccountNames() {
+      financeApi.getChannelAccountMaps().then(res => {
+        if (res.code === 20000) {
+          const arr = [...res.data]
+          this.restaurants = arr.filter(f => f.accountState === '1')
+        }
+      })
+    },
     del(e) {
       productApi.delete(e).then(res => {
         if (res.code == 20000) {
@@ -123,6 +256,27 @@ export default {
         }
       })
     },
+    getChannlList(){
+      productApi.getChannels().then(res=>{
+        if (res.code === 20000) {
+         this.channelList = res.data
+        }
+      })
+    },
+    getCheckedSites(){
+      if (this.productId){
+        this.checkedLoading = true
+        productApi.getCheckedSites(this.productId).then(res=>{
+          if (res.code === 20000) {
+            let checkedData = res.data
+            this.checkedSites = checkedData.filter(f => {
+              return this.OilStationSelectionList.find(i => i.siteId === f.siteId);
+            });
+          }
+          this.checkedLoading = false
+        })
+      }
+    },
     edit(row) {
       let data = Object.assign({}, row, {
         name: this.selectAttrId.split('/')[1] || '',
@@ -148,4 +302,18 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.station-select{
+  height: calc(100vh - 300px);
+  .table-area{
+    .transfer-button{
+      display: grid;
+      align-items: center;
+      grid-template-columns: auto auto;
+      button{
+        width: 50px;
+      }
+    }
+  }
+}
+</style>

src/views/product/productAdd/index.vue

@@ -36,7 +36,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="商品分类：" prop="cate_id"> 
+            <el-form-item label="商品分类：" prop="cate_id">
               <el-cascader
                 class="content_width"
                 v-model="formValidate.cate_id"
@@ -52,7 +52,7 @@
             <el-form-item label="商品名称：" prop="store_name">
               <el-input class="content_width" v-model.trim="formValidate.store_name" placeholder="请输入商品名称" />
             </el-form-item>
-          </el-col> 
+          </el-col>
           <el-col :span="24">
             <el-form-item label="单位：" prop="unit_name">
               <el-input class="content_width" v-model="formValidate.unit_name" placeholder="请输入单位" />
@@ -1166,7 +1166,7 @@
                 <div
                   class="color-item"
                   :class="activity[color]"
-                  v-for="color in formValidate.activity" 
+                  v-for="color in formValidate.activity"
                   :key="color"
                 >
                   {{ color }}
@@ -3052,7 +3052,7 @@ export default {
 }
 
 .box-video-style {
-  width: 375px; 
+  width: 375px;
   height: 211px;
   border-radius: 10px;
   background-color: #707070;
@@ -3276,7 +3276,7 @@ export default {
 .ifam {
   width: 344px;
   height: 644px;
- 
+
   background-size: 344px 644px;
   padding: 40px 20px;
   padding-top: 50px;

src/views/product/productAdd/newIndex.vue

@@ -77,7 +77,7 @@
           </el-col> -->
           <el-col v-bind="grid2">
             <el-form-item label="自提油站" prop="siteIds">
-              <el-tag 
+              <el-tag
                 style="margin-left: 10px;"
                 :key="tagIndex"
                 v-for="(tag, tagIndex) in OilStationSelectionList"
@@ -216,6 +216,7 @@
                       :disabled="isDisabled"
                       maxlength="9"
                       min="0.01"
+                      required
                       v-model="scope.row[item.value]"
                       class="priceBox"
                       @blur="keyupEvent(iii, scope.row[item.value], scope.$index, 3)"
@@ -326,8 +327,8 @@
       </el-form>
     </el-card>
     <CreatTemplates ref="addTemplates" @getList="getShippingList" />
-    <el-dialog title="选择油站" :visible.sync="isOilStationSelection">
-      <OilStationSelection :OilStationSelectionList="OilStationSelectionList" @submit="oilStationSelectionSubmit"> </OilStationSelection>
+    <el-dialog width="80%" title="选择油站" :visible.sync="isOilStationSelection">
+      <OilStationSelection :product-id="this.$route.query.id" ref="selectSites" :OilStationSelectionList="OilStationSelectionList" @submit="oilStationSelectionSubmit"> </OilStationSelection>
     </el-dialog>
   </div>
 </template>
@@ -575,7 +576,7 @@ export default {
         this.$destroy();
     },
   methods: {
-    async chenkId() { 
+    async chenkId() {
       if (this.$route.query && this.$route.query.id) {
         await this.getproductInfo(this.$route.query.id)
       }
@@ -619,17 +620,17 @@ export default {
             } else {
               return null
             }
-          }).filter(item => item); 
+          }).filter(item => item);
         setTimeout(() => {
           this.ManyAttrValue.forEach((item, index) => {
             let data = this.formValidate.stockList.find(i => i.attributeJson == JSON.stringify(item.data));
             if (data) {
               Object.assign(item, data,{delect:false})
-            }else{  
-              Object.assign(item, data,{delect:true}) 
+            }else{
+              Object.assign(item, data,{delect:true})
             }
           })
-          this.ManyAttrValue = this.ManyAttrValue.filter(item=>!item.delect) 
+          this.ManyAttrValue = this.ManyAttrValue.filter(item=>!item.delect)
         }, 1000)
       })
     },
@@ -645,6 +646,9 @@ export default {
     },
     delectOilStationSelectionList(e, index) {
       this.OilStationSelectionList.splice(index, 1)
+      if (this.$refs.selectSites&&this.$refs.selectSites.checkedSites){
+        this.$refs.selectSites.checkedSites =  this.$refs.selectSites.checkedSites.filter(site => e.siteId !== site.siteId);
+      }
     },
     oilStationSelectionSubmit(e) {
       this.OilStationSelectionList = e
@@ -1181,6 +1185,10 @@ export default {
     },
     handleSubmitNest(name) {
       console.log(this.formValidate,"handleSubmitNest")
+      if (this.formValidate.attr<1){
+        this.$message.error('规格属性不能为空')
+        return
+      }
       this.$refs[name].validate(valid => {
         if (valid) {
           if (this.currentTab++ > 2) this.currentTab = 0
@@ -1235,7 +1243,7 @@ export default {
           skuNum,
           id
         }
-      }) 
+      })
       this.formValidate[isRecommendOrNewMark] = '1'
       loadingFn.call(
         this,
@@ -1253,7 +1261,7 @@ export default {
           if (res.code == 20000) {
             this.$message.success('操作成功')
             setTimeout(() => {
-              this.$router.push({ path: 'productList' })
+              this.$router.push({ path: 'productList', query: { refresh: true }})
               // this.$destroy()
             }, 1000)
           }