yos_web/src/Form/promotion/edit.vue

<template>
  <div>
    <el-button size="mini" type="primary" @click="editBtn">编 辑</el-button>
    <el-drawer
        title="创建促销方案"
        :visible.sync="dialogFormVisible"
        size="40%"
        direction="rtl"
        append-to-body
        @close="dialogFormVisible = false"
        :show-close="false">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules" ref="form" label-width="120px" label-position="right" size="mini">
            <el-col :span="12">
              <el-form-item label="方案名称:" prop="promname">
                <el-input v-model="form.promname"  placeholder="请输入促销方案名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="促销类型:" prop="type">
                <el-select v-model="form.type" placeholder="请选择促销类型" style="width: 100%">
                  <el-option label="普通促销" value="普通促销"></el-option>
                  <el-option label="打包促销" value="打包促销"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="订货账户:" prop="type">
                <el-select v-model="form.sa_accountclassid" placeholder="请选择订货账户" style="width: 100%">
                  <el-option
                      v-for="item in accountList"
                      :key="item.sa_accountclassid"
                      :label="item.accountname"
                      :value="item.sa_accountclassid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="品牌:" prop="sa_brandid">
                <el-select v-model="form.sa_brandid" placeholder="请选择品牌" style="width: 100%" @change="brandChange">
                  <el-option
                      v-for="item in brandList"
                      :key="item.sa_brandid"
                      :label="item.brandname"
                      :value="item.sa_brandid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="领域:" prop="tradefield">
                <el-select v-model="form.tradefield" placeholder="请选择领域" style="width: 100%">
                  <el-option
                      v-for="item in tradefieldList"
                      :key="item.rowindex"
                      :label="item.value"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起订数量:" prop="orderminqty">
                <el-input v-model="form.orderminqty" placeholder="请输入起订数量"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起订金额:" prop="orderminamount">
                <el-input v-model="form.orderminamount" placeholder="请输入起订金额"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单增量:" prop="orderaddqty">
                <el-input v-model="form.orderaddqty" placeholder="请输入订单增量"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="活动开始时间" prop="begdate">
                <el-date-picker
                  style="width:100%"
                  v-model="form.begdate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择开始日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="活动结束时间" prop="begdate">
                <el-date-picker
                  style="width:100%"
                  v-model="form.enddate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="方案描述:" prop="remarks">
                <el-input v-model="form.remarks" type="textarea" rows="5" placeholder="请输入方案描述"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="封面" prop="cover">
                <input v-show="false" type="text" v-model="form.cover">
                <uploadFile
                  :one="true"
                  :multiple="false"
                  ref="upload"
                  style="margin-top:10px"
                  :folderid="folderid"
                  accept=".JPG,.PNG,.jpg,.png"
                  type="image"
                  :bindData="bindData"
                  @onSuccess="uploadSuccess"
                  @deleteSuccess="deleteSuccess"
                  @onChange="coverChange">
                </uploadFile>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import uploadFile from '@/HDrpManagement/promotion/components/upload'
export default {
  name: "add",
  components:{uploadFile},
  props:['data'],
  data(){
    var checkBegTimer = (rule, value, callback) => {
      if (new Date(this.form.enddate).getTime() > new Date(value).getTime()) {
        callback()
      } {
        return callback(new Error('开始时间必须小于结束时间'));
      }
    }
    var checkEndTimer = (rule, value, callback) => {
      if (new Date(this.form.begdate).getTime() < new Date(value).getTime()) {
        callback()
      } {
        return callback(new Error('结束时间必须大于开始时间'));
      }
    }
    return {
      tradefieldList:[],
      brandList:[],
      accountList:[],
      bindData:{},
      dialogFormVisible:false,
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      form:{
        "sa_promotionid":0,     //sat_notice_classid<=0时 为新增
        "sa_accountclassid": "",
        "sa_brandid":'',
        "promname": "",
        "remarks": "",
        "type": "",
        "tradefield": "",
        "orderminqty": '',
        "orderaddqty": '',
        "orderminamount": '',
        "begdate": '',
        "enddate": "",
        "cover":''
      },
      rules:{
        promname:[
          { required: true, message: '请输入方案名称', trigger: 'blur'},
        ],
        sa_brandid:[
          { required: true, message: '未选择品牌', trigger: 'change'},
        ],
        type:[
          { required: true, message: '请选择促销类型', trigger: 'change'},
        ],
        sa_accountclassid:[
          { required: true, message: '请选择订货账户', trigger: 'blur'},
        ],
        orderminqty:[
          { required: true, message: '请输入起订量', trigger: 'blur'},
        ],
        orderaddqty:[
          { required: true, message: '请输入订单增量', trigger: 'blur'},
        ],
        orderminamount:[
          { required: true, message: '请输入起订金额', trigger: 'blur'},
        ],
        begdate:[
          { required: true, message: '请选择开始时间', trigger: 'change'},
          { validator: checkBegTimer , trigger:'change'}
        ],
        enddate:[
          { required: true, message: '请选择结束时间', trigger: 'change'},
          { validator: checkEndTimer , trigger:'change'}
        ],
        tradefield:[
          { required: true, message: '请选择领域', trigger: 'change'},
        ],
        cover:[
          { required: true, message: '请上传封面', trigger: 'change'},
        ],
      },
    }
  },
  watch: {
    dialogFormVisible (val) {
      if (!val) {
        this.$refs.form.resetFields()
        this.$refs.upload.fileLinkList = []
        this.$refs.upload.$refs.upload.clearFiles()
      }
    }
  },
  methods:{
    editBtn () {
      this.dialogFormVisible = true
      this.form = Object.assign({},this.form,this.data)
      this.form.cover = this.form.attinfos
      console.log(this.form);
      
      this.$nextTick(() => {
        this.$refs.upload.fileLinkList = this.form.attinfos
        this.$refs.upload.fileList = this.form.attinfos
      })
    },
    onSubmit(){
      console.log(this.form)
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": "20221230144503",
          "version":1,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.dialogFormVisible = false
          this.bindData = {
            "ownertable": 'sa_promotion',
            "ownerid": res.data.sa_promotionid,
            "usetype": 'default',
          }
          this.$refs['upload'].toUpload(() => {
            // this.$emit('onSuccess')
            this.dialogFormVisible = false
          })
        })
      })
    },
    brandChange (val) {

    },
    coverChange (data) {
      this.form.cover = data
    },
    /* 领域 */
    async getTradefield () {
      const res = await this.$store.dispatch('optiontypeselect','tradefield')
      this.tradefieldList = res.data
      console.log(this.tradefieldList,'领域');
    },
    /* 品牌 */
    async getBrand () {
      let res = await this.$api.requested({
        "id": "20220922085103",
        "version":1,
        "content": {
          "where":{
              "condition":""
          }
        }
      })
      this.brandList = res.data
      console.log(this.brandList,'品牌');
      
    },
    /* 账户类型 */
    async getAccount () {
      let res = await this.$api.requested({
        "id": "20221008134803",
        "version":1,
        "content": {
            "where":{
                "condition":"",
                "isused":1
            }
        }
      })
      this.accountList = res.data
      console.log(this.accountList,'账户');
      
    },
    uploadSuccess (data) {
      this.$emit('onSuccess')
    },
    deleteSuccess () {
      this.form.cover = ''
    }
  },
  created() {
    this.getTradefield()
    this.getBrand()
    this.getAccount()
    this.form.begdate = new Date().getFullYear() + '-' + parseInt(new Date().getMonth() + 1) + '-' + parseInt(new Date().getDate())
  },
}
</script>

<style scoped>

</style>