添加自定义标签样式

guoyuji

2024-06-13 054d444182d93e1ffed8ff61e90c2e3a96a34152

添加自定义标签样式

 north-glass-erp/northglass-erp/src/components/mm/TagStyle.vue

New file
@@ -0,0 +1,298 @@
<script setup>
import {onMounted, ref} from "vue"
import {VueDraggable} from "vue-draggable-plus"
import request from "@/utils/request"
import {ElMessage, ElMessageBox} from "element-plus"
import {CloseBold, Delete, InfoFilled} from "@element-plus/icons-vue"
import {useI18n} from "vue-i18n"
const { t } = useI18n()

const activeName = ref('1')

const list = ref([
])
const size = ref([
  {column:'width',title:null},
  {column:'height',title:null}
])
const order = ref({
  orderId:'order',
  project:'order',
  orderType:'order',
  customers:'order',
  icon:'order',
  orderClassify:'order',
  packType:'order',
  deliveryDate:'order',
  batch:'order',
  calculateType:'order',
  salesman:'order',
  alType:'order',
  money:'order',
  contractId:'order',
  customerBatch:'order',
  contacts:'order',
  contactNumber:'order',
  deliveryAddress:'order',
  processingNote:'order',
})

const tags = ref([])
const tag = ref({
  id:null,
  name:null,
  type:1,
  tagWidth:10,
  tagHeight:10,
  value:null,
  size:null

})
const clickIndex = ref(-1)

const getTags = () => {
  request.get('tagStyle/getTagList').then(res => {
    tags.value = res.data
  })
}

onMounted(() => {
  getTags()
})

const saveTag = () => {
  ElMessageBox.prompt( '新增标签名:', {
    confirmButtonText: '保存',
    cancelButtonText: '取消',
    inputPattern:/^.{1,20}$/,
    inputErrorMessage: '请输入20个字符以内的且不为空的字符',
  }).then(({ value }) => {
      tag.value.name = value
      tag.value.value = JSON.stringify(list.value)
      tag.value.size = JSON.stringify(size.value)
      request.post('tagStyle/saveTag',tag.value).then(res => {
        if(res.code === '200' && res.data===true){
          ElMessage.success("保存成功")
          getTags()
        }
      })
  })

}

const changeType = () => {
  if(tag.value.type == 1){
    tag.value.tagWidth=10
    tag.value.tagHeight=10
    size.value=[
      {column:'width',title:null},
      {column:'height',title:null}
    ]
  }else if(tag.value.type == 2){
    tag.value.tagWidth=4
    tag.value.tagHeight=3
    size.value=[
      {column:'childWidth',title:null},
      {column:'childHeight',title:null}
    ]
  }
}

const clearList = () => {
  list.value = []
}

const searchTag = (getTag,index) => {
  list.value = JSON.parse(getTag.value)
  size.value = JSON.parse(getTag.size)
  tag.value = getTag
  clickIndex.value = index
}

const close = () => {
  tag.value = {
    id:null,
    name:null,
    type:1,
    tagWidth:10,
    tagHeight:10,
    value:null,
    size:null
  }
  list.value = []
  size.value = [
    {column:'width',title:null},
    {column:'height',title:null}
  ]
  clickIndex.value = -1
}

const deleteTag = () => {
  request.post(`tagStyle/deleteTag/${tag.value.id}`).then(res => {
    if(res.code === '200' && res.data===true){
      ElMessage.success("删除成功")
      getTags()
      close()
    }

  })
}

const addList = (getTag,from) => {
  list.value.push({
    name:getTag,
    title:null,
    isFocus:false,
    from:from
  })
}

const deleteThis = (index) => {
  list.value.splice(index,1)
}


</script>

<template>
  <div style="width: 100%;height: 100%;" class="common-layout">
    <el-container style="width: 100%;height: 100%;">
      <el-aside  width="200px">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="标签列表" name="1">
            <div v-for="(tag,index) in tags"
                 :class="{'tag-active':index===clickIndex}"
                 @dblclick="searchTag(tag,index)">
              {{tag.name}}
            </div>

          </el-collapse-item>
        </el-collapse>
      </el-aside>
      <el-container>
        <el-header  >
          <el-row id="el-rows" style="margin-top: 0.5rem">
            <el-select
                v-model="tag.type"
                @change="changeType"
                placeholder="" >
              <el-option label="成品" :value="1"/>
              <el-option label="半成品" :value="2"/>
            </el-select>
            <el-select placeholder="订单表头">
              <el-option @click="addList(keys,item)"
                         v-for="(item,keys,index) in order"
                         :label="$t(item+'.'+keys)" :value="keys"/>

            </el-select>

            <el-button v-if="tag.id!==null" @click="close" type="primary" circle  :icon="CloseBold"/>
          </el-row>
        </el-header>
        <el-main>
          <VueDraggable
              ref="el"
              v-model="list"
              :animation="150"
              ghostClass="ghost"
              style="height: 95%;background-color: white;position: relative;"
              class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
          >
            <div
                v-for="(item,index) in list"
                :key="item.id"
                class="cursor-move h-30 bg-gray-500/5 rounded p-3 cursor-move"
            >
              <el-row @mouseenter="item.isfocus=true" @mouseleave="item.isfocus=false" >
                <el-col :span="6"><el-input v-model="item.title"/></el-col>
                <el-col :span="4">{{ item.name }}</el-col>
                <el-col :span="4">
                  <el-button
                      size="default"
                      v-if="item.isfocus"
                      @click="deleteThis(index)"
                      :icon="Delete" circle />
                </el-col>
              </el-row>
            </div>
            <div class="cursor-move h-30 bg-gray-500/5 rounded p-3 cursor-move"
                 style="position: absolute;bottom: 0.5rem; " >
              <el-row  >
                <el-col :span="6"><el-input v-model="size[0].title"/></el-col>
                <el-col :span="4">{{ size[0].column }}</el-col>
                <el-col :span="6"><el-input v-model="size[1].title"/></el-col>
                <el-col :span="4">{{size[1].column }}</el-col>
              </el-row>

            </div>
          </VueDraggable>
        </el-main>
        <el-footer style="padding-top: 0.5rem">
          <el-popconfirm
              width="220"
              confirm-button-text="确定"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="确定删除?"
              @confirm="deleteTag"
              v-if="tag.id!==null"
          >
            <template #reference>
              <el-button type="primary"  style="float: left"  >删除</el-button>
            </template>
          </el-popconfirm>

          <el-button type="primary" @click="clearList">清空</el-button>
          <el-button v-if="tag.id===null" type="primary" @click="saveTag" >新增</el-button>
          <el-button v-else type="primary" @click="saveTag" >修改</el-button>
        </el-footer>
      </el-container>
    </el-container>

  </div>
</template>

<style scoped>
/*.common-layout .el-aside {
  background-color: var(--el-color-primary-light-8);
  color: var(--el-text-color-primary);
  text-align: center;
}*/

.common-layout .el-header, .common-layout .el-footer {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-text-color-primary);
  text-align: center;
  border: var(--el-color-primary-light-7) 1px solid;
}

.common-layout .el-main {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-text-color-primary);
  text-align: center;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.cursor-move{
  background-color: #6b72800d;
  margin-bottom: 0.2rem;
  text-align: center;
  height: 2rem;
  width: 50%;
  margin-left: 25%;
}
.el-select{
  width: 8rem
}

#el-rows > *{
  margin-right: 0.5rem;
}
.tag-active{
  background-color: #c8ebfb;
}
</style>

 north-glass-erp/northglass-erp/src/components/sd/order/OrderProcess.vue

@@ -3,7 +3,7 @@
import {changeFilterEvent, filterChanged} from "@/hook"
import {useI18n} from "vue-i18n"
import request from "@/utils/request"
import {ElMessage} from "element-plus";
import {ElMessage} from "element-plus"
const { t } = useI18n()
const xGrid = ref()
const gridOptions = reactive({

 north-glass-erp/northglass-erp/src/views/pp/processCard/SelectPrintFlowCard.vue

@@ -8,19 +8,18 @@
import {useI18n} from 'vue-i18n'
import {changeFilterEvent, filterChanged} from "@/hook"
import footSum from "@/hook/footSum"
import TagStyle from "@/components/mm/TagStyle.vue"
//语言获取
const {t} = useI18n()

let router = useRouter()


//定义页面总页数
let pageTotal = ref('')

//定义数据返回结果
let produceList = ref([])
//定义当前页数
let pageNum = $ref(1)
let pageState = null
let titleStyleVisible = ref(false)


const form = reactive({
  date1: '',
@@ -119,7 +118,6 @@
  })
}

//子组件接收参数
const xGrid = ref()
const gridOptions = reactive({
  loading: true,
@@ -187,10 +185,10 @@
  ],//表头按钮

  toolbarConfig: {
    buttons: [],
    import: false,
    // export: true,
    // print: true,
    buttons: [
      {'code': 'titleStyle', 'name': '标签样式',status: 'primary'}
    ],

    zoom: true,
    custom: true
  },
@@ -212,6 +210,20 @@
  }

})

const gridEvents = {
  async toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'titleStyle':  {
          titleStyleVisible.value = true
          break
        }
      }
    }
  }
}

</script>

@@ -246,6 +258,7 @@
        height="100%"
        max-height="100%"
        v-bind="gridOptions"
        v-on="gridEvents"
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
@@ -274,6 +287,15 @@


    </vxe-grid>
    <el-dialog
        id="titleStyle"
        :title="'标签样式'"
        style="width: 70%;height:70% "
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-model="titleStyleVisible">
      <tag-style style="width: 100%;height: 100%"/>
    </el-dialog>
  </div>
</template>

@@ -285,6 +307,9 @@
#selectForm {
  width: 60%;
}

:deep(#titleStyle .el-dialog__body){
  height: 90%;
  width: 100%;
}

</style>

 north-glass-erp/northglass-erp/src/views/sd/order/CreateOrder.vue

@@ -1063,7 +1063,7 @@
    </div>
    <div class="order-detail">
      <vxe-grid
          max-height="100%"
          height="100%"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"

 north-glass-erp/northglass-erp/src/views/sd/product/CreateProduct.vue

@@ -684,7 +684,7 @@
              <el-input v-model="productTotal.totalThickness"  size="small" disabled  />
            </div>
          </el-col>
          <el-col :span="5">
          <el-col :span="8">
            <div class="grid-content ep-bg-purple" >
              <el-text class="mx-1"
                       style="margin-left: 0.5rem;text-align: center">

 north-glass-erp/northglass-erp/src/views/system/userPassWord/UpdateUserPassWord.vue

@@ -10,8 +10,6 @@
const router = useRouter()
const route = useRoute()
const userStore = useUserInfoStore()

console.log(userStore.user.id)
//注册用户参数
const register = reactive({
  userId: userStore.user.id,

 north-glass-erp/src/main/java/com/example/erp/controller/pp/TagStyleController.java

New file
@@ -0,0 +1,44 @@
package com.example.erp.controller.pp;

import com.example.erp.common.Result;
import com.example.erp.entity.pp.TagStyle;
import com.example.erp.service.pp.TagStyleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("tagStyle")
public class TagStyleController {
    private final TagStyleService tagStyleService;

    public TagStyleController(TagStyleService tagStyleService) {
        this.tagStyleService = tagStyleService;
    }

    @PostMapping("saveTag")
    public Result saveTag(@RequestBody TagStyle tagStyle){
        return Result.seccess(tagStyleService.saveTag(tagStyle));
    }

    @GetMapping("getTagList")
    public Result getTagList(){
        return Result.seccess(tagStyleService.getTagList());
    }
    @GetMapping("getTagById/{id}")
    public Result getTagById(@PathVariable("id") Integer id){
        return Result.seccess(tagStyleService.getTagById(id));
    }

    @PostMapping("deleteTag/{id}")
    public Result deleteTag(@PathVariable("id") Integer id){
        return Result.seccess(tagStyleService.deleteTag(id));
    }


    @PostMapping("updateTag")
    public Result updateTag(TagStyle tagStyle){
        return Result.seccess(tagStyleService.updateTag(tagStyle));
    }


}

 north-glass-erp/src/main/java/com/example/erp/entity/pp/TagStyle.java

New file
@@ -0,0 +1,21 @@
package com.example.erp.entity.pp;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;

import java.time.LocalDateTime;

@Data
public class TagStyle {
    @TableId(type = IdType.AUTO)
    private  Integer id;
    private Integer    type;
    private String    name;
    private Double    tagWidth;
    private Double    tagHeight;
    private String    value;
    private String size;
    private LocalDateTime createTime;

}

 north-glass-erp/src/main/java/com/example/erp/entity/sd/OrderDetail.java

@@ -32,7 +32,7 @@
    private Double computeGrossArea;
    private String processingNote;
    private String remarks;
    private Integer bendRadius;
    private Double bendRadius;
    private String edgingType;
    private Double weight;
    private Double perimeter;

 north-glass-erp/src/main/java/com/example/erp/mapper/pp/TagStyleMapper.java

New file
@@ -0,0 +1,9 @@
package com.example.erp.mapper.pp;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.erp.entity.pp.TagStyle;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface TagStyleMapper extends BaseMapper<TagStyle> {
}

 north-glass-erp/src/main/java/com/example/erp/service/pp/TagStyleService.java

New file
@@ -0,0 +1,44 @@
package com.example.erp.service.pp;

import com.baomidou.dynamic.datasource.annotation.DS;
import com.example.erp.entity.pp.TagStyle;
import com.example.erp.mapper.pp.TagStyleMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
@DS("pp")
public class TagStyleService {
    private final TagStyleMapper tagStyleMapper;

    public TagStyleService(TagStyleMapper tagStyleMapper) {
        this.tagStyleMapper = tagStyleMapper;
    }

    public Boolean saveTag(TagStyle tagStyle) {
        if(tagStyle.getId()==null){
            return tagStyleMapper.insert(tagStyle)>0;
        }else {
            return tagStyleMapper.updateById(tagStyle)>0;
        }

    }

    public List<TagStyle> getTagList() {
        return tagStyleMapper.selectList(null);
    }

    public boolean deleteTag(Integer id) {
        return tagStyleMapper.deleteById(id)>0;
    }

    public Boolean updateTag(TagStyle tagStyle) {
        return tagStyleMapper.updateById(tagStyle)>0;
    }

    public TagStyle getTagById(Integer id) {
        return tagStyleMapper.selectById(id);
    }
}

 north-glass-erp/src/main/resources/mapper/pp/TagStyle.xml

New file
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.erp.mapper.pp.TagStyleMapper">




</mapper>

 north-glass-erp/src/main/resources/mapper/sd/OrderGlassDetailMapper.xml

@@ -25,7 +25,7 @@
            if(pd.glass_sort=1,'(外)',if(pd2.glass_sort=pd.glass_sort,'(内)','')),
            pd.detail,
            if( od.bend_radius!='',
                round(od.width*(od.bend_radius-round(sum(t.thicknessCount),2))/od.bend_radius,0),
                round(od.width*(od.bend_radius-round(sum(t.thicknessCount),2))/od.bend_radius,1),
                od.width
              ),
            od.height,