暂存

src/DRP/HDrpManagement/customizedSolution/modules/solmx.vue

@@ -6,26 +6,48 @@
       class="custom-class"
       title="方案明细"
       placement="right"
-      width="500px"
+      width="800px"
       :closable="false"
       @ok="submit"
       @cancel="onClose"
       :ok-button-props="{ disabled: !utils.hasPermission('edit')}"
     > 
-      <a-space direction="vertical" :size="10">
-        <div v-for="item in optionsData" :key="item.index">
-          <a-space :size="10">
-            <a-button :type="checked(item)?'primary':'default'" @click="addOptionToSol(item)" block>{{item.description}}</a-button>
-            <a-checkbox v-model:checked="item.isonlydisplay" @change="isonlydisplayChange(item)">开启选项隐藏</a-checkbox>
+    <a-row :gutter="20" style="margin-top: 20px;">
+      <a-col :span="6">
+        <p>可添加方案</p>
+        <a-divider style="margin: 20px 0;"/>
+        <div v-for="(item,index) in optionsData" :key="index">
+          <a-space :size="50">
+            <a-button type="default" block>{{item.description}}</a-button>
+            <!-- <a-checkbox v-model:checked="item.isonlydisplay" @change="isonlydisplayChange(item)">仅显示可选项</a-checkbox> -->
+            <a-button @click="addOptionToSol(item)" type="link">添加</a-button>
           </a-space>
-          
+          <a-divider style="margin: 20px 0;"/>
         </div>
-      </a-space>
+      </a-col>
+      <a-col :span="1" style="display: flex;align-items: center;">
+        <SwapOutlined />
+      </a-col>
+      <a-col :span="17">
+        <p>已添加方案</p>
+        <a-divider style="margin: 20px 0;"/>
+        <div v-for="(item,index) in hasOptionsData" :key="item.index" :draggable="true" @dragstart="dragStart(index)" @dragover="dragOver(index,$event)" @drop="drop(index,$event)" @dragend="dragEnd(index)">
+          <a-space :size="50">
+            <a-button type="primary" block>{{item.description}}</a-button>
+            <a-checkbox v-model:checked="item.isonlydisplay" @change="isonlydisplayChange(item)">仅显示可选项</a-checkbox>
+            <a-button @click="deleteOptionToSol(item)" type="link">移除</a-button>
+          </a-space>
+          <a-divider style="margin: 20px 0;"/>
+        </div>
+      </a-col>
+    </a-row>
     </a-modal>
   </div>
 </template>
 
 <script setup>
+import { SwapOutlined } from '@ant-design/icons-vue';
+
 import {ref,defineEmits,defineProps,nextTick} from 'vue'
 import Api from '@/api/api'
 import utils from '@/utils/utils'
@@ -44,32 +66,32 @@ const isonlydisplayChange = (item)=>{
     }
   })
 }
+const filterData = ()=>{
+  const valueToIsOnlyDisplayMap = {};  
+  hasOptionsData.value.forEach(e => {  
+    valueToIsOnlyDisplayMap[e.value] = e.isonlydisplay;  
+  });  
+  
+  optionsData.value = optionsData.value.filter(item => {  
+    if (!valueToIsOnlyDisplayMap.hasOwnProperty(item.value)) {
+      return item
+    }
+  });
+}
 const optionsData = ref([])
 const getOptionsData = async ()=>{
   const res = await Api.requested({"id":"20230325133303","content":{"sa_customschemeid":0}})
   optionsData.value = res.data
-  nextTick(()=>{
-    const valueToIsOnlyDisplayMap = {};  
-    hasOptionsData.value.forEach(e => {  
-      valueToIsOnlyDisplayMap[e.value] = e.isonlydisplay;  
-    });  
-      
-    optionsData.value.forEach(item => {  
-      if (valueToIsOnlyDisplayMap.hasOwnProperty(item.value)) {  
-        item.isonlydisplay = valueToIsOnlyDisplayMap[item.value];  
-      }  
-    });
-  })
-  
+  filterData(res.data)
 }
 const hasOptionsData = ref([])
 const getHasOptionsData = async ()=>{
   const res = await Api.requested({"id":"20230321155603","content":{"sa_customschemeid":props.sa_customschemeid}})
   hasOptionsData.value = res.data
+  getOptionsData()
 }
 const showDrawer = ()=>{
   visible.value = true
-  getOptionsData()
   getHasOptionsData()
 }
 const onClose = () => {
@@ -81,12 +103,13 @@ const submit = async ()=>{
       id:20230321155503,
       content:{
         sa_customschemeid:props.sa_customschemeid,
-        iteminfos:hasOptionsData.value.map(e=>{
+        iteminfos:hasOptionsData.value.map((e,index)=>{
           return {
             description:e.description,
             sa_customscheme_itemsid:0,
             value:e.value,
-            isonlydisplay:e.isonlydisplay ? 1 : 0
+            isonlydisplay:e.isonlydisplay ? 1 : 0,
+            sequence:index
           }
         })
       }
@@ -101,22 +124,42 @@ const submit = async ()=>{
 }
 
 const addOptionToSol = (item)=>{
-  let rs = hasOptionsData.value.some(e=>e.value == item.value)
-  if (rs) {
-    hasOptionsData.value = hasOptionsData.value.filter(e=>{
-      if (e.value !== item.value) {
-        return e
-      }
-       
-    })
-  } else {
-    hasOptionsData.value.push(item)
-  }
+  hasOptionsData.value.push(item)
+  optionsData.value = optionsData.value.filter(e=>e.value !== item.value)
+}
+const deleteOptionToSol = (item)=>{
+  optionsData.value.push(item)
+  hasOptionsData.value = hasOptionsData.value.filter(e=>e.value !== item.value)
 }
 const checked = (item)=>{
    let rs = hasOptionsData.value.some(e=>e.value == item.value)
    return rs
 }
+const draggedIndex = ref(0)
+const dragStart = (index)=> {
+  console.log(index)
+  draggedIndex.value = index;
+}
+const dragOver = (index,event)=> {
+  event.preventDefault();
+  const movedIndex = draggedIndex.value;
+  if (movedIndex !== index) {
+    const list = [...hasOptionsData.value];
+    const movedItem = list[movedIndex];
+    list.splice(movedIndex, 1);
+    list.splice(index, 0, movedItem);
+    hasOptionsData.value = list;
+    draggedIndex.value = index;
+  }
+}
+const drop = (index,event)=> {
+  event.preventDefault();
+}
+const dragEnd = (index)=> {
+  console.log(index)
+  draggedIndex.value = null;
+  
+}
 </script>
 <style>
 </style>

src/DRP/SDrpManagement/productGroup/detail/index.vue

@@ -37,7 +37,13 @@
           
           <p class="label"><span class="mr-10">特殊说明:</span><span style="color:red">{{group.item[0].specalnote || '--'}}</span></p>
           <a-divider/>
-          <div v-if="group.materialRows.length > 0" class="mt-30 input-number-panel">
+          <div v-for="custom in customschemeItems" :key="custom.rowindex" class="mt-30 input-number-panel">
+            <p class="label"><span class="mr-10">{{custom.description}}</span></p>
+            <div>
+              <a-button class="mr-10 mt-10" v-for="(item,index) in group[`${custom.value}Rows`]" :key="index" v-show="isonlydisplay(custom.value)" :disabled="!item.flag" :type="data[custom.value] == item.parm?'primary':'default'" @click="customClick(custom.value,item.parm)">{{item.parm == 'custom'?'自定义':item.parm}}</a-button>
+            </div>
+          </div>
+          <!-- <div v-if="group.materialRows.length > 0" class="mt-30 input-number-panel">
             <p class="label"><span class="mr-10">{{siteInfo.siteid == 'DLB'?'选项':'基材'}}</span></p>
             <div>
               <a-button class="mr-10 mt-10" v-for="(item,index) in group.materialRows" :key="index" v-show="isonlydisplay('material')" :disabled="!item.flag" :type="data.material == item.parm?'primary':'default'" @click="customClick('material',item.parm)">{{item.parm}}</a-button>
@@ -61,7 +67,7 @@
             <div>
               <a-button class="mr-10 mt-10" v-for="(item,index) in group.specRows"  :key="index" v-show="isonlydisplay('spec')" :disabled="!item.flag" :type="data.spec == item.parm?'primary':'default'" @click="customClick('spec',item.parm)">{{item.parm == 'custom'?'自定义':item.parm}}</a-button>
             </div>
-          </div>
+          </div> -->
           
           <div v-if="group.item[0].iscustomsize == 1">
             <p style="color:#999;margin-top:30px">定制信息</p>
@@ -165,8 +171,7 @@
     group.value = res.data
 
     group.value.specRows = group.value.specRows.reverse()
-    customschemeItems.value = res.data.item[0].customschemeItems ? res.data.item[0].customschemeItems : []
-    console.log(customschemeItems.value,'customschemeItems.value')
+    
     if(group.value.specRows.filter(item => item.parm != '自定义').every(item => !item.flag) && group.value.item[0].iscustomsize) data.value.spec = '自定义'
     qty.value = res.data.item[0].orderminqty
     // 获取可定制项
@@ -177,13 +182,8 @@
         custom.value.push(key.replace(reg2,""))
       }
     })
+    customschemeItems.value = res.data.customschemeItems
 
-    // if (res.data.rows.length == 1) {
-    //   // 遍历对象
-    //   for (let key in res.data.rows[0]) {
-    //     data.value[key] = res.data.rows[0][key]
-    //   }
-    // }
     callback ? callback():""
 
     getCustomsizeData()