|
@@ -1,18 +1,23 @@
|
|
|
<template>
|
|
|
- <vxe-modal v-model="value" id="tagModal" width="400" v-loading="load" @hide="hide" height="350" show-footer title="修改标签">
|
|
|
- <by-form :propConfig="config" ref="form">
|
|
|
- <template v-slot:actionType="{value}">
|
|
|
- <el-switch
|
|
|
- v-model="value.actionType"
|
|
|
- active-text="移除"
|
|
|
- inactive-text="新增"
|
|
|
- :inactive-value="1"
|
|
|
- :active-value="2">
|
|
|
- </el-switch>
|
|
|
- </template>
|
|
|
- </by-form>
|
|
|
+ <vxe-modal v-model="value" id="tagModal" width="60%" v-loading="load" @hide="hide" height="70%" show-footer title="修改标签">
|
|
|
+ <div class="type">
|
|
|
+ <el-radio-group v-model="actionType">
|
|
|
+ <el-radio :label="1">列表新增</el-radio>
|
|
|
+ <el-radio :label="2">列表移除</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <el-scrollbar class="label-group">
|
|
|
+ <el-checkbox-group v-model="labels" :max="10">
|
|
|
+ <div class="label-box">
|
|
|
+ <div class="label-item" v-for="(item,index) of labelData" :key="index">
|
|
|
+ <el-checkbox :label="item.name"></el-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-scrollbar>
|
|
|
<template #footer>
|
|
|
<div class="btn">
|
|
|
+ <el-button plain size="small" @click="value = false">取消</el-button>
|
|
|
<el-button type="primary" size="small" @click="btn">确定</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -21,104 +26,50 @@
|
|
|
<script lang="ts">
|
|
|
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
|
|
import { setLabels } from '@/api/omsOrder'
|
|
|
+import {queryAll, updateOrdered, del} from '@/api/omsLabel'
|
|
|
@Component({components:{}})
|
|
|
export default class TabModal extends Vue {
|
|
|
value=false;
|
|
|
load=false;
|
|
|
billValue:Array<any>=[];
|
|
|
- config:any={
|
|
|
- attr:{
|
|
|
- rules:{
|
|
|
- labels: [
|
|
|
- { required: true, message: '标签不能为空!', trigger: 'input' }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- columns:[
|
|
|
- [{
|
|
|
- label:'标签',
|
|
|
- prop:'labels',
|
|
|
- labelWidth:'80px',
|
|
|
- component:'by-input',
|
|
|
- compConfig:{
|
|
|
- attr:{
|
|
|
- type:'textarea',
|
|
|
- rows:3,
|
|
|
- placeholder:'每行一个标签,换行输入,每个标签字符长度不超过10',
|
|
|
- autosize:{
|
|
|
- maxRows:19
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }],
|
|
|
- [{
|
|
|
- label:'',
|
|
|
- prop:'actionType',
|
|
|
- labelWidth:'80px',
|
|
|
- slot:true
|
|
|
- }]
|
|
|
- ]
|
|
|
+ actionType:any=1
|
|
|
+ labels:Array<any>=[]
|
|
|
+ labelData:Array<any>=[]
|
|
|
+ mounted(){
|
|
|
+ this.getList()
|
|
|
}
|
|
|
hide(){
|
|
|
- (this.$refs.form as any).clearValidate();
|
|
|
- (this.$refs.form as any).clearValue();
|
|
|
+ this.actionType = 1;
|
|
|
+ this.labels = [];
|
|
|
}
|
|
|
- btn(){
|
|
|
- (this.$refs.form as any).validate().then(()=>{
|
|
|
- let data = (this.$refs.form as any).getValue();
|
|
|
- let newV=data.labels.split('\n');
|
|
|
- let msg1 = '';
|
|
|
- let msg2='';
|
|
|
- for(const item of newV){
|
|
|
- if(item && item.length >10){
|
|
|
- if(msg1){
|
|
|
- msg1 = msg1 + ',' + item
|
|
|
- }else{
|
|
|
- msg1 = item
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- let i1=-1;
|
|
|
- for(const item1 of newV){
|
|
|
- let i2=-1;
|
|
|
- i1++;
|
|
|
- for(const item2 of newV){
|
|
|
- i2++;
|
|
|
- if(i1 != i2 && item1 == item2){
|
|
|
- if(msg2){
|
|
|
- msg2 = msg2 + ',' + item2
|
|
|
- }else{
|
|
|
- msg2 = item2
|
|
|
- }
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- let msg = '';
|
|
|
- if(msg1){
|
|
|
- msg = '标签“'+msg1 + '”不能超过10个字符;'
|
|
|
+ getList(){
|
|
|
+ this.load = true;
|
|
|
+ queryAll().then((res:any) => {
|
|
|
+ this.load = false;
|
|
|
+ this.labelData = []
|
|
|
+ if(res.data){
|
|
|
+ this.labelData = res.data
|
|
|
}
|
|
|
- if(msg2){
|
|
|
- msg = msg + '标签“'+msg2 + '”重复输入;'
|
|
|
- }
|
|
|
- if(msg){
|
|
|
- this.$message(msg)
|
|
|
- return
|
|
|
- }
|
|
|
- data.labels = newV;
|
|
|
- data.idList = this.billValue;
|
|
|
- this.load = true
|
|
|
- setLabels(data).then(()=>{
|
|
|
- this.load = false;
|
|
|
- (this.$message({
|
|
|
- message:'操作成功!',
|
|
|
- type:'success'
|
|
|
- }));
|
|
|
- this.$emit('handleSuccess');
|
|
|
- this.value = false;
|
|
|
- }).catch(()=>{
|
|
|
- this.load = false;
|
|
|
- })
|
|
|
+ }).catch(()=>{
|
|
|
+ this.load = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ btn(){
|
|
|
+ let data:any = {};
|
|
|
+ data.actionType = this.actionType
|
|
|
+ data.labels = this.labels;
|
|
|
+ data.idList = this.billValue;
|
|
|
+ this.load = true
|
|
|
+ setLabels(data).then(()=>{
|
|
|
+ this.load = false;
|
|
|
+ (this.$message({
|
|
|
+ message:'操作成功!',
|
|
|
+ type:'success'
|
|
|
+ }));
|
|
|
+ this.$emit('handleSuccess');
|
|
|
+ this.value = false;
|
|
|
+ }).catch(()=>{
|
|
|
+ this.load = false;
|
|
|
})
|
|
|
}
|
|
|
setShow(v:boolean){
|
|
@@ -128,4 +79,34 @@ export default class TabModal extends Vue {
|
|
|
this.billValue = data;
|
|
|
}
|
|
|
}
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.type{
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 16px;
|
|
|
+}
|
|
|
+.label-group{
|
|
|
+ .label-box{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .label-item{
|
|
|
+ width: 33.3333%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.label-group{
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 37px);
|
|
|
+ div.el-scrollbar__wrap {
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+ .el-scrollbar__bar {
|
|
|
+ right: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|