mt-ck-wms-ui/src/views/report-manage/components/AddLablePanel.vue

<template>
  <div :class="$style.container">
    <HeaderTitleBar>
      <div slot="content">
        <el-button type="success" @click="btnClickDesign">
          ①模版设计
        </el-button>
        <el-button icon="ios-search" @click="btnClickPrint">
          模版预览
        </el-button>
        <el-button icon="md-help" @click="btnClickInfo">
          设计说明
        </el-button>
      </div>
    </HeaderTitleBar>
    <el-form
      ref="printModel"
      :model="printModel"
      :rules="rules"
      label-width="100px"
      :class="$style.form"
    >
      <el-form-item
        label="标签名称"
        prop="printModelName"
        :class="$style['form-item']"
      >
        <el-input v-model="printModel.printModelName" />
      </el-form-item>
      <el-form-item label="标签分类" prop="printModelType" :class="$style['form-item']">
        <el-select
          v-model="printModel.printModelType"
          :class="$style.select"
          filterable
          clearable
          placeholder="标签分类"
        >
          <el-option
            v-for="item in printModelTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="标签内容"
        prop="printModelContent"
        :class="$style['form-item-remark']"
      >
        <el-input
          v-model="printModelContent"
          :readonly="true"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 8}"
        />
      </el-form-item>
      <SubmitBar @on-cancle="close()" @on-submit="handleSubmit('printModel')" />
    </el-form>
  </div>
</template>

<script>
import { find } from 'lodash'
import { list } from '@/api/material-manage/material'
import { add, getInfo, update } from '@/api/material-manage/batch.js'
import SubmitBar from '@/views/art/components/submit-bar'
import HeaderTitleBar from '@/views/material-manage/components/header-title-bar'
import { getLodop } from '@/assets/libs/LodopFuncs.js'

export default {
  name: 'Refueling',
  components: {
    SubmitBar,
    HeaderTitleBar
  },
  props: {},
  data() {
    return {
      printModelContent: '',
      printModel: {
        printModelId: '',
        printModelCode: '',
        printModelName: '',
        printModelContent: '',
        printModelType: 1,
        isDefault: 0,
        isPreview: 1,
        state: 'normal'
      },
      printModelTypeList: [{
        id: 1,
        name: '自定义'
      }],
      rules: {
        printModelName: [
          { required: true, message: '标签名称不能为空', trigger: 'blur' },
          { min: 1, message: '长度在3个字符以上', trigger: 'blur' }
        ],
        printModelType: [
          {
            required: true,
            message: '请至少选择一个标签分类',
            trigger: 'change'
          }
        ],
        printModelContent: [
          { required: true, message: '标签内容不能为空', trigger: 'blur' },
          { min: 1, message: '长度在3个字符以上', trigger: 'blur' }
        ]
      },
      id: null
    }
  },
  watch: {},
  created() {
    this.init()
  },
  methods: {
    init() {
      this.id = this.$route.query.id
      console.log(this.id)
      console.log(!this.id)
      list().then(res => {
        console.log(res)
        this.materialList = res.data
        if (!this.id && this.materialList && this.materialList.length > 0) {
          this.materialCode = this.materialList[0].externalCode
          this.printModel.materialId = this.materialList[0].id
        }
      })
      if (this.id) {
        getInfo({ id: this.id }).then((res) => {
          console.log(res)
          this.printModel = res.data
          this.materialCode = this.printModel.materialCode
        })
      }
    },
    handleSubmit(formName) {
      console.log('handleSubmit')
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false
        }
        if (this.id) {
          update(this.printModel).then(res => {
            this.close()
          })
        } else {
          add(this.printModel).then(res => {
            this.close()
          })
        }
      })
    },
    close() {
      this.$router.push({ path: this.$route.query.redirect })
    },
    materialChange(item) {
      const material = find(this.materialList, m => m.id === item)
      this.materialCode = material && material.externalCode
    },
    btnClickDesign() {
      const LODOP = getLodop()
      LODOP.PRINT_INIT('初始化打印')
      LODOP.SET_PRINT_MODE('PROGRAM_CONTENT_BYVAR', true) // 生成程序时，内容参数有变量用变量，无变量用具体值
      LODOP.SET_SHOW_MODE('DESIGN_IN_BROWSE', 1)
      const modelCode = this.printModel.printModelContent
      LODOP.ADD_PRINT_DATA('ProgramData', modelCode) // 装载模板
      this.printModel.printModelContent = LODOP.PRINT_DESIGN()
      if (LODOP.CVERSION) {
        LODOP.On_Return = (TaskID, Value) => {
          console.log('CVERSION')
          console.log(Value)
          this.printModel.printModelContent = Value
          this.printModelContent = Value
          this.getProgramData()
        }
      }
    },
    getProgramData() {
      const LODOP = getLodop()
      console.log('getProgramData')
      const content = LODOP.GET_VALUE('ProgramData', 0) // 获得文档式模板
      console.log(content)
      if (LODOP.CVERSION) {
        LODOP.On_Return = (TaskID, Value) => {
          console.log(Value)
          this.printModel.printModelContent = Value
        }
      }
    },
    btnClickPrint() {
      const LODOP = getLodop()
      const modelCode = this.printModel.printModelContent
      LODOP.ADD_PRINT_DATA('ProgramData', modelCode) // 装载模板
      // 按类名赋值
      LODOP.SET_PRINT_STYLEA('name', 'CONTENT', '张三')
      LODOP.SET_PRINT_STYLEA('code', 'CONTENT', '123455')
      LODOP.PREVIEW()
    },
    btnClickInfo() {
    }
  }
}
</script>
<style lang="scss" module>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .form {
    width: 60%;
    margin-top: 30px;
    display: flex;
    flex-flow: wrap;
    .form-item {
      width: 50%;
    }
    .form-item-remark {
      width: 100%;
    }
  }
  .input {
    display: flex;
    margin: 8px 16px 8px 4px;
    align-items: center;
    .select {
      width: 100%;
    }
  }
  .select {
    width: 100%;
  }
}
</style>