ccl_plm-vue/src/views/modules/sampleManagement/technicalSpecificationDetail/com_bm_printing.vue

<template>
  <div class="mod-config">
    <printing ref="printing"></printing>

    <el-form label-position="top" style="margin-top: 10px;">
      <el-form-item>
        <el-button type="primary" @click="colorSearch(true)" >刷新</el-button>
        <template v-if="isAuth('103002:bmRoute')">
          <el-button type="primary" @click="newColor()" v-if="!ifDisableFlag">新增</el-button>
          <el-button type="primary" @click="colorSaveBatch()" v-if="!ifDisableFlag">一键导入</el-button>
          <el-button v-if="!editBatchVisible" @click="editBatchModel">批量编辑</el-button>
          <el-button v-if="editBatchVisible" @click="batchModel" :loading="batchLoading">批量保存</el-button>
        </template>
      </el-form-item>
      <div class="rq">
        <el-table
          height="400"
          :data="colorTable"
          border
          style="width: 100%">
          <el-table-column
            prop=""
            header-align="center"
            align="center"
            min-width="30"
            v-if="!ifDisableFlag"
            label="操作">
            <template slot-scope="scope" v-if="isAuth('103002:bmRoute')">
              <a type="text" size="small" @click="updateColor(scope.row)">编辑</a>
              <a type="text" size="small" @click="deleteColor(scope.row)">删除</a>
            </template>
          </el-table-column>
          <el-table-column
            prop="order"
            header-align="center"
            align="left"
            min-width="40"
            label="色序">
            <template slot-scope="scope">
              <span v-if="editBatchVisible">
                <el-input :controls="false" v-model="scope.row.order"
                          @input="value=>scope.row.order= value.match(/^[1-9]\d*$/) ? value.match(/^[1-9]\d*$/)[0] : ''"
                          style="height: 11px; width: 98%;">
                </el-input>
              </span>
              <span v-else>
                <span>{{scope.row[scope.column.property]}}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="油墨类型" header-align="center">
            <el-table-column
              prop="inkType"
              header-align="center"
              align="left"
              min-width="60"
              label="Ink Type">
              <template slot-scope="scope">
                <span v-if="editBatchVisible">
                  <el-input :controls="false" v-model="scope.row.inkType" style="height: 11px; width: 98%;"></el-input>
                </span>
                <span v-else>
                  <span>{{scope.row[scope.column.property]}}</span>
                </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="颜色参考" header-align="center">
            <el-table-column
              prop="colorReference"
              header-align="center"
              align="left"
              min-width="60"
              label="Color Reference">
            </el-table-column>
          </el-table-column>
          <el-table-column label="颜色匹配" header-align="center">
            <el-table-column
              prop="colorMatch"
              header-align="center"
              align="left"
              min-width="60"
              label="Color Match">
              <template slot-scope="scope">
                <span v-if="editBatchVisible">
                  <el-input :controls="false" v-model="scope.row.colorMatch" style="height: 11px; width: 98%;"></el-input>
                </span>
                <span v-else>
                  <span>{{scope.row[scope.column.property]}}</span>
                </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="容积" header-align="center">
            <el-table-column
              prop="bcm"
              header-align="center"
              align="left"
              min-width="60"
              label="BCM">
              <template slot-scope="scope">
                <span v-if="editBatchVisible">
                  <el-input :controls="false" v-model="scope.row.bcm" style="height: 11px; width: 98%;"></el-input>
                </span>
                <span v-else>
                  <span>{{scope.row[scope.column.property]}}</span>
                </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="印刷速度" header-align="center">
            <el-table-column
              prop="speed"
              header-align="center"
              align="left"
              min-width="60"
              label="Speed">
              <template slot-scope="scope">
                <span v-if="editBatchVisible">
                  <el-input :controls="false" v-model="scope.row.speed" style="height: 11px; width: 98%;"></el-input>
                </span>
                <span v-else>
                  <span>{{scope.row[scope.column.property]}}</span>
                </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="外干燥" header-align="center">
            <el-table-column
              prop="dry"
              header-align="center"
              align="left"
              min-width="60"
              label="Dry">
              <template slot-scope="scope">
                <span v-if="editBatchVisible">
                  <el-input :controls="false" v-model="scope.row.dry" style="height: 11px; width: 98%;"></el-input>
                </span>
                <span v-else>
                  <span>{{scope.row[scope.column.property]}}</span>
                </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="UV固化/UV Curing" header-align="center">
            <el-table-column
              prop="resourceNo"
              header-align="center"
              align="left"
              min-width="60"
              label="机台">
              <template slot-scope="scope">
                <span v-if="editBatchVisible">
                  <dict-data-select :site="searchData.site" v-if="searchData.site" v-model="scope.row.resourceNo" style="height: 11px; width: 98%;" dict-type="bm_printing_resource"></dict-data-select>
                </span>
                <span v-else>
                  <span>{{scope.row[scope.column.property]}}</span>
                </span>
              </template>
            </el-table-column>
            <!--          <el-table-column-->
            <!--            prop="gallus"-->
            <!--            header-align="center"-->
            <!--            align="left"-->
            <!--            min-width="60"-->
            <!--            label="Gallus(level%)">-->
            <!--          </el-table-column>-->
            <!--          <el-table-column-->
            <!--            prop="markAndy"-->
            <!--            header-align="center"-->
            <!--            align="left"-->
            <!--            min-width="60"-->
            <!--            label="MarkAndy(level%)">-->
            <!--          </el-table-column>-->
            <!--          <el-table-column-->
            <!--            prop="lp"-->
            <!--            header-align="center"-->
            <!--            align="left"-->
            <!--            min-width="60"-->
            <!--            label="LP(L/M/H)">-->
            <!--          </el-table-column>-->
            <!--          <el-table-column-->
            <!--            prop="hexiang"-->
            <!--            header-align="center"-->
            <!--            align="left"-->
            <!--            min-width="60"-->
            <!--            label="Hexiang(L/H)">-->
            <!--          </el-table-column>-->
          </el-table-column>
        </el-table>
      </div>

      <div  class="rq-bmPic" >
        <img style="max-width:  100%;max-height: 100%;vertical-align:middle;" :src="picUrl">
      </div>
    </el-form>

    <el-dialog append-to-body title="颜色信息" :close-on-click-modal="false" v-drag :visible.sync="colorFlag" width="600px">
      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item :label="'色序'">
          <el-input v-model="colorData.order" type="number" style="width: 130px"  onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" ></el-input>
        </el-form-item>
        <el-form-item :label="'油墨类型'">
          <el-input v-model="colorData.inkType" style="width: 130px" ></el-input>
        </el-form-item>
        <el-form-item >
          <span slot="label" style="" @click="getBaseList(133,1)" ><a herf="#">颜色参考</a></span>
          <el-input v-model="colorData.colorReference" style="width: 130px" ></el-input>
        </el-form-item>
        <el-form-item :label="'颜色匹配'">
          <el-input v-model="colorData.colorMatch"  style="width: 130px" ></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item :label="'容积'">
          <el-input v-model="colorData.bcm"  style="width: 130px" ></el-input>
        </el-form-item>
        <el-form-item :label="'印刷速度'">
          <el-input v-model="colorData.speed" style="width: 130px" ></el-input>
        </el-form-item>
        <el-form-item :label="'外干燥'">
          <el-input v-model="colorData.dry" style="width: 130px" ></el-input>
        </el-form-item>
        <el-form-item :label="'机台'">
          <dict-data-select :site="colorData.site" v-if="colorData.site" v-model="colorData.resourceNo" style="width: 130px" dict-type="bm_printing_resource"></dict-data-select>
        </el-form-item>
<!--        <el-form-item :label="'Gallus(level%)'">-->
<!--          <el-input v-model="colorData.gallus" style="width: 130px" ></el-input>-->
<!--        </el-form-item>-->
      </el-form>
<!--      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">-->
<!--        <el-form-item :label="'MarkAndy(level%)'">-->
<!--          <el-input v-model="colorData.markAndy" style="width: 130px" ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item :label="'LP(L/M/H)'">-->
<!--          <el-input v-model="colorData.lp" style="width: 130px" ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item :label="'Hexiang(L/H)'">-->
<!--          <el-input v-model="colorData.hexiang" style="width: 130px" ></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
      <el-footer style="height:40px;margin-top: 10px;text-align:center">
        <el-button type="primary" @click="colorSave()">保存</el-button>
        <el-button type="primary" @click="colorFlag = false">取消</el-button>
      </el-footer>
    </el-dialog>

    <Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>
  </div>
</template>

<script>
  import printing from "./com_bm_demoSlot";/*组件*/
  import {
    searchBMPrintingDetail,
    updateBMPrintingDetail,
    searchBMPrintingColor,
    saveBMPrintingColor,
    deleteBMPrintingColor,
    saveBMPrintingColorBatch, // 一键导入
    updateBMPrintingColorBatch, // 批量修改
  } from "@/api/sampleManagement/technicalSpecificationList.js"
  import Chooselist from '@/views/modules/common/Chooselist'
  import DictDataSelect from "../../sys/dict-data-select-highlight.vue";
  export default {
    components: {
      DictDataSelect,
      Chooselist,printing
    },
    data() {
      return {
        searchData: {
          site: '',
          username: this.$store.state.user.name,
          codeNo: '',
          buNo:'',
          type:'',
        },
        picUrl:this.$store.state.user.bmPicUrl+'defaultPaperOrientation.png',
        ifDisableFlag:false,
        colorTable:[],
        colorData:{
          id:'',
          site: '',
          codeNo:'',
          order:'',
          inkType:'',
          colorReference:'',
          colorMatch:'',
          bcm:'',
          speed:'',
          dry:'',
          gallus:'',
          markAndy:'',
          lp:'',
          hexiang:'',
          updateBy:'',
          updateDate:'',
          resourceNo: ''
        },
        colorFlag:false,
        editBatchVisible: false,
        batchLoading: false,
      }
    },
    methods: {
      // 批量编辑模态框
      editBatchModel() {
        if (this.editBatchVisible) {
          this.editBatchVisible = false
        } else {
          this.editBatchVisible = true
        }
      },

      // 批量保存
      batchModel() {
        let params = []
        params = this.colorTable
        this.batchLoading = true
        updateBMPrintingColorBatch(params).then(({data}) => {
          if (data && data.code === 0) {
            this.colorSearch()
            this.$message.success(data.msg)
            this.editBatchVisible = false
          } else {
            this.$message.error(data.msg)
          }
        }).finally(() => {
          this.batchLoading = false
        })
      },

      // 获取基础数据列表S
      getBaseList (val, type) {
        this.tagNo = val
        this.tagNo1 = type
        this.$nextTick(() => {
          let strVal = ''
          if (val === 133) {
            if(type==1) {
              strVal = this.colorData.colorReference
            }
          }
          this.$refs.baseList.init(val, strVal)
        })
      },
      /* 列表方法的回调 */
      getBaseData (val) {
        if (this.tagNo === 133) {
          if(this.tagNo1==1) {
            this.colorData.colorReference = val.part_no
          }
        }
      },

      //初始化组件的参数
      init (inData) {
        if (this.searchData.codeNo != null && this.searchData.codeNo !== '') {
          return false;
        }
        //初始化参数
        this.searchData = JSON.parse(JSON.stringify(inData))
        // if (this.searchData.ifDisableFlag) {
        //   this.ifDisableFlag = true
        // }
        //刷新表格
        this.searchTable()
        this.colorSearch()
        //刷新表格
        this.searchData.type='printing'
        this.$refs.printing.init(JSON.parse(JSON.stringify(this.searchData)))
      },

      searchTable () {

      },

      newColor () {
        if (this.searchData.codeNo === '') {
          this.$message.success('数据错误，请关闭页面重试！')
          return false;
        }
        let number = 1
        for (let i = 0; i < this.colorTable.length; i++) {
          if (number <= this.colorTable[i].order) {
            number = Number(this.colorTable[i].order) + 1
          }
        }
        this.colorData = {
          id: 0,
          site: this.searchData.site,
          codeNo: this.searchData.codeNo,
          order: number,
          inkType: '',
          colorReference: '',
          colorMatch: '',
          bcm: '',
          speed: '',
          dry: '',
          gallus: '',
          markAndy: '',
          lp: '',
          hexiang: '',
          updateBy: '',
          updateDate: '',
          resourceNo: ''
        }
        this.colorFlag = true
      },

      updateColor (row) {
        this.colorData = JSON.parse(JSON.stringify(row))
        this.colorFlag = true
      },

      colorSearch (type) {
        searchBMPrintingColor(this.searchData).then(({data}) => {
          if (type) {
            this.$message.success( '操作成功')
          }
          this.colorTable = data.rows
        })
      },

      colorSave () {
        saveBMPrintingColor(this.colorData).then(({data}) => {
          if (data && data.code === 0) {
            this.colorSearch()
            this.colorFlag = false
            this.$message.success( '操作成功')
          } else {
            this.$message.error(data.msg)
          }
        })
      },

      // 一键导入
      colorSaveBatch () {
        this.$confirm("此操作将清空已填写的数据，是否继续？", '保存提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          let tempData = {
            site: this.searchData.site,
            codeNo: this.searchData.codeNo,
            createBy: this.$store.state.user.name,
          }
          saveBMPrintingColorBatch(tempData).then(({data}) => {
            if (data && data.code === 0) {
              this.colorSearch()
              this.$message.success( '操作成功')
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },

      deleteColor(row){
        this.$confirm(`是否删除这条信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteBMPrintingColor(row).then(({data}) => {
            if (data && data.code === 0) {
              this.colorSearch();
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {}
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        })
      },

    },
  }
</script>

<style scoped>

</style>