订单标签

src/views/oms/order/components/labelsModal.vue

@@ -0,0 +1,176 @@
+<template>
+  <vxe-modal v-model="value" id="labelsModal" width="70%" height="80%" @hide="hide" @show="show" title="选标签"  transfer show-footer v-loading="load">
+    <div class="labelBox" id="labelBox">
+      <by-tool :propConfig="tool" class="labelTool" @clickHandle="clickHandle" id="omsLabelTool" />
+      <by-table :propConfig="tableConfig" ref="table" >
+        <template v-slot:ordered="{row}">
+          <vxe-input v-if="row.isSystem != 1" v-model="row.ordered" size="small" type="number"></vxe-input>
+          <span v-else>{{ row.ordered }}</span>
+        </template>
+      </by-table>
+    </div>
+    <add-label ref="addLabel" @handleSuccess="getList" :isSystem="0" />
+    <template #footer>
+      <div class="btn">
+        <el-button type="primary" size="small" @click="btn">确定</el-button>
+      </div>
+    </template>
+  </vxe-modal>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import {queryAll, updateOrdered, del} from '@/api/omsLabel'
+import addLabel from '../../omsLabel/components/addLabel.vue'
+@Component({components:{addLabel}})
+export default class LabelsModal extends Vue {
+  value = false;
+  load = false;
+  tool={
+    tools:{
+      add:true,
+      refresh:true
+    },
+    audit:{}
+  }
+  tableConfig:any={
+    attr:{
+      size:'mini',
+      align:'center',
+      seq:true,
+      checkbox:true
+    },
+    columns:[{
+      title:'名称',
+      field:'name'
+    },{
+      title:'排序',
+      field:'ordered',
+      width:150,
+      slot:true
+    },{
+      title:'操作',
+      action:true,
+      width:200,
+      plugins:[{
+        name:'排序',
+        event:{
+          show:(row:any) => {
+            return row.isSystem != 1
+          },
+          click:(row:any) => {
+            this.sortHandle(row);
+          }
+        }
+      },{
+        name:'删除',
+        event:{
+          show:(row:any) => {
+            return row.isSystem != 1
+          },
+          click:(row:any) => {
+            this.delHandle(row);
+          }
+        }
+      }]
+    }]
+  }
+  setShow(v:boolean){
+    this.value = v;
+  }
+  show(){
+    this.$nextTick(()=>{
+      let height = (document.getElementById('labelBox') as any).parentNode.offsetHeight;
+      this.tableConfig.attr.height=height - 32 - 48;
+      if(this.$refs.table){
+        (this.$refs.table as any).setConfig(this.tableConfig);
+      }
+    })
+    this.getList()
+  }
+  getList(){
+    this.load = true;
+    queryAll().then((res:any) => {
+      this.load = false;
+      if(this.$refs.table){
+        (this.$refs.table as any).setValue(res.data);
+      }
+    }).catch(()=>{
+      this.load = false
+    })
+  }
+  hide(){
+    if(this.$refs.table){
+      (this.$refs.table as any).clearCheckboxRow();
+    }
+  }
+  sortHandle(row:any){
+    this.load = true;
+    updateOrdered({
+      id:row.id,
+      ordered:Number(row.ordered)
+    }).then(()=>{
+      this.load = false;
+      this.getList();
+    }).catch(()=>{
+      this.load = false
+    })
+  }
+  delHandle(row:any){
+    this.$confirm('此操作将删除“'+row.name+'”, 是否继续?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(() => {
+      this.load = true;
+      del({
+        id:row.id
+      }).then(()=>{
+        this.load = false;
+        this.getList();
+      }).catch(()=>{
+        this.load = false
+      })
+    }).catch(()=>{})
+  }
+  btn(){
+    let data = (this.$refs.table as any).getSelectData();
+    let v='';
+    if(data.length == 0){
+      this.$message('请选择标签！')
+      return
+    }
+    if(data.length > 10){
+      this.$message('标签选择不能超过10个！')
+      return
+    }
+    for(const item of data){
+      if(v){
+        v = v + ','+item.name
+      }else{
+        v = item.name
+      }
+    }
+    this.value = false;
+    this.$emit('onChange',v);
+  }
+  clickHandle(e:string){
+    if(e == 'onAdd'){
+      (this.$refs.addLabel as any).setShow(true)
+    }
+    if(e == 'onRefresh'){
+      this.getList();
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.labelBox{
+  width: 100%;
+  height: 100%;
+}
+.labelTool{
+  padding-bottom: 16px;
+}
+</style>