industrial-deposit-website/src/views/fids/productManagement/sendCode/Index.vue

<template>
  <div class="sendCode_wrap">
    <div class="sendCode_info">
      <el-form :model="sendCodeForm" ref="sendCodeForm" label-width="150px" :rules="rules">
        <el-form-item label="产品名称：" prop="commodityName">
          <el-input class="input_width" v-model="sendCodeForm.commodityName" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="标识前缀：" prop="prefix">
          <el-input class="input_width" v-model="sendCodeForm.prefix" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="自动产品序列：" prop="type">
          <el-select v-model="sendCodeForm.type" placeholder="请选择自动产品序列" :disabled="true">
            <el-option label="否" :value='0'></el-option>
            <el-option label="是" :value='1'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发码数量：" prop="sendingNumber" v-if="sendCodeForm.type===1">
          <el-input class="input_width" v-model="sendCodeForm.sendingNumber"></el-input>
        </el-form-item>
        <!-- <div v-if="sendCodeForm.type===0">
          <el-form-item label="标识后缀：" prop="suffix">
          <span class="m_left_20">
            <el-link :underline="false" type="primary" @click="onView()">编写说明</el-link>
          </span>
          </el-form-item>
          <el-form-item style="margin-bottom:0;">
            <el-row :gutter="20">
              <el-col :span="5">基础分类代码（选填）</el-col>
              <el-col :span="6">产品代码（必填）</el-col>
              <el-col :span="6">产品唯一序号（选填）</el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row class="custom_row" :gutter="20" v-for="(item, index) in sendCodeForm.codeSendingInfoSaveDTOS" :key="index">
              <el-col :span="5">
                <el-form-item prop="key" label-width="0">
                  <el-input v-model="item.fieldName" placeholder="基础分类代码（必填）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="value" label-width="0">
                  <el-input v-model="item.fieldValue" placeholder="产品代码（选填）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="value" label-width="0">
                  <el-input v-model="item.fieldNo" placeholder="产品唯一序号（选填）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label-width="0">
                  <el-button type="success" @click="addRow(index)">增加</el-button>
                  <el-button type="danger" @click="deleteRow(index)">删除</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </div> -->
        <el-form-item>
          <el-row class="encoding_view">
            <el-col :span="16">
              <el-button type="primary" @click="previewSubmit('preview')">预览结果</el-button>
            </el-col>
            <!-- <el-col :span="8">
              <el-row>
                <el-col :span="12">
                  <el-link type="primary">Excel表格模板下载</el-link>
                </el-col>
                <el-col :span="12">
                  <el-button type="primary">批量上传</el-button>
                </el-col>
              </el-row>
            </el-col> -->
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-card class="box-card">
            <div v-for="(item,index) of preview" :key="index">{{ item }}</div>
          </el-card>
        </el-form-item>
        <div class="btn_bottom">
          <el-button type="primary" @click="previewSubmit('submit')">提交</el-button>
          <el-button type="info" @click="goBack">返回</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {validateNum} from "@/utils/validate";
import {sendingCodePreview, sendingCodeSubmit} from "@/api/productManagement"
import { onlinePreview } from "@/settings";
export default {
  name: "sendCode",
  components: {},
  props: {},
  data() {
    const checkNum = (rule, value, callback) => {
      if (!validateNum(value)) {
        return callback(new Error("请输入数字"));
      } else {
        callback();
      }
    };
    return {
      disabled: true,
      preview: [],
      sendCodeForm: {
        commodityName: JSON.parse(window.sessionStorage.getItem('row')).commodityName,
        // prefix: "88.133.110",//标识前缀
        prefix: this.$store.state.account.tenantPrefix,//标识前缀
        commodityId: JSON.parse(window.sessionStorage.getItem('row')).id,//产品ID
        type: 1,
        sendingNumber: null,//发码数量
        codeSendingInfoSaveDTOS: [
          {
            basicsCode: 0,
            commodityCode: 0,
            commodityNumber: "",
            intactCode: ""
          }
        ]
      },
      rules: {
        commodityName: [
          {required: true, message: "请输入产品名称", trigger: "blur"}
        ],
        prefix: [
          {required: true, message: "请输入表示前缀", trigger: "blur"}
        ],
        type: [
          {required: true, message: "请选择是否自动发码", trigger: "blur"}
        ],
        sendingNumber: [
          {required: true, message: "请输入发码数量", trigger: "blur"},
          {validator: checkNum, trigger: "blur"}
        ],
        files: [
          {required: true, message: '请上传图片材料', trigger: 'blur'},
        ]
      }
    };
  },
  beforeCreate() {
  },
  create() {
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  computed: {},
  watch: {},
  methods: {
    onView() {
      window.open(onlinePreview + 'http%3A%2F%2F124.70.30.20%3A8894%2Ffile%2F2021%2F04%2F6b70264b-4fbc-4a96-be27-28747d18263c.pdf');
    },
    //增加自定义数据项
    addRow(index) {
      this.sendCodeForm.codeSendingInfoSaveDTOS.splice(index+1,0,{
        fieldName: '',
        fieldValue: '',
        sequence: this.sendCodeForm.codeSendingInfoSaveDTOS.length
      })
    },
    //删除自定义数据项
    deleteRow(index) {
      if (this.sendCodeForm.codeSendingInfoSaveDTOS.length !== 1) {
        this.sendCodeForm.codeSendingInfoSaveDTOS.splice(index, 1)
      }
    },
    //预览和提交
    previewSubmit(site) {
      this.$refs.sendCodeForm.validate((valid) => {
        if (valid) {
          if (site === "preview") {
            this.previewResult()
          } else if (site === "submit") {
            this.saveSubmit()
          }
        } else {
          return false;
        }
      });
    },
    //预览结果
    previewResult() {
      let params = {
        ...this.sendCodeForm
      }
      params.sendingNumber = Number(params.sendingNumber)
      sendingCodePreview(params).then(res => {
        if(res.data.isSuccess){
          this.preview=res.data.data
        }
      })
    },
    //保存提交
    saveSubmit() {
      let params = {
        ...this.sendCodeForm
      }
      sendingCodeSubmit(params).then(res => {
        if(res.data.isSuccess){
          this.$message({
            showClose: true,
            message: '提交成功',
            type: 'success'
          });
          this.goBack()
        }
      })
    },
    //返回
    goBack() {
      this.$refs.sendCodeForm.resetFields();
      this.$router.push("/productManagement/productCategoryManagement");
    }
  },
  directives: {},
  filters: {},
}
</script>

<style lang="scss" scoped>
.sendCode_wrap {
  margin: 10px;

  .sendCode_info {
    padding: 20px;
    background: #fff;

    .el-button {
      margin-right: 20px;
    }

    .input_width {
      width: 50%;
    }

    .btn_bottom {
      text-align: center;
    }

    .m_left_20 {
      margin-left: 20px;
    }

    .encoding_view {
      margin-top: 50px;
    }

    .custom_row {
      margin-bottom: 10px;
      margin-left: 150px;
    }
  }

  .box-card {
    min-height: 200px;
  }
}
</style>