anpinjingyuan-ui/src/combination/MainForm.vue

<template>
  <div>
    <el-form label-width="88px" ref="form" :model="form" style="display:flex;flex-wrap: wrap">
          <el-form-item :label="item.name" v-for="(item,index) in searchdata" :key="item.index" :label-width="item.labelSize + 'px'" :rules="[item.rules]" :prop="item.label" v-if="(index+1) <= inDex">
            <el-select v-if="item.form == 1" filterable @change="changeWarehouse(item)" :disabled="item.disabled" clearable v-model="form[item.label]" :style="{ width: item.width + 'px' }">
              <el-option v-for="(item,index) in item.data"
              :key="index"
              :label="item.label"
              :value="item.value"/>
            </el-select>
            <el-input v-if="item.form == 2" :placeholder="'请输入'+item.name" :disabled="item.disabled" v-model="form[item.label]" :style="{ width: item.width + 'px' }"></el-input>
            <el-input v-if="item.form == 4":disabled="item.disabled" type="textarea" v-model="form[item.label]" :style="{ width: item.width + 'px' }"></el-input>
            <el-date-picker
              v-if="item.form == 3"
              :disabled="item.disabled"
              v-model="form[item.label]"
              :style="{ width: item.width + 'px' }"
              type="date" placeholder="选择日期"
              format="yyyy - MM - dd"
              value-format="yyyy-MM-dd"/>
            <el-date-picker
              v-if="item.form == 6"
              :disabled="item.disabled"
              v-model="form[item.label]"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              unlink-panels/>
            <div v-if="item.form == 5"  v-model="form[item.label]" style="width: 100%;display:flex;">
              <el-input clearable v-model="form.first " oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'></el-input>
              <span style="padding-left: 10px;padding-right: 10px">至</span>
              <el-input v-model="form.last" clearable oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")' @change="changeMoney"></el-input></div>
          </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'MainForm',
  props:['searchdata','hidedata','display','queryParms','form','data','show','inDex'],
  data() {
    return{
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  created() {
    console.log(this.searchdata)
  },
  methods:{
    changeWarehouse(item){
      this.$emit('changeWarehouse',item)
    },
    hide() {
      if(this.form.first && this.form.last){
        this.form.moneys = [this.form.first,this.form.last]
      }
    },
    rules(){
      console.log(this.form)
      this.$refs["form"].validate((valid) => {
        this.$emit('verificationRules',valid)
      })
    },
    saveRules(res){
      this.$refs["form"].validate((valid) => {
        if (res == 1 || res == 2){
          this.$emit('backSave',valid,res)
        }else {
          this.$emit('backSave',valid)
        }
      })
    },
    changeMoney(){
      if(parseInt(this.form.last) < parseInt(this.form.first)){
        this.$message.error("第二个金额不能小于第一个金额，请重新输入")
        this.form.last = ''
      }
    },
  }
}
</script>

<style scoped>

</style>