封装好的form组件

<template>
  <div class="form-index">
    <bfe-form :inline="true" ref="searchFormInline" label-position="right" :label-width="lableWidth" class="demo-form-inline">
      <bfe-input v-show="false"></bfe-input>
      <template v-for="(item, index) in data" class="col-xs-12 col">
        <transition :key="index" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutUp" class="col-xs-3 col">
            <bfe-form-item v-show="!item.expand">
              <span slot="label">
                  <span>{{ item.label }}</span>
              </span>
              <!--input输入框-->
              <bfe-input v-if="item.type==='input'" class='queryItem' :maxlength="item.maxlength"  size="small" v-model="searchFormInline[index]" :placeholder="'请输入'+ item.label" :disabled="disabled"></bfe-input>

               <!--number输入框-->
              <bfe-input v-if="item.type==='number'" class='queryItem'  size="small" type="number" v-model="searchFormInline[index]" :placeholder="'请输入'+item.label" :disabled="disabled"></bfe-input>
                <bfe-date-picker
                  v-if="item.type==='yearselect'"
                  v-model="yearselectDate"
                  size="small"
                  @change="changeYearselect"
                  align="right"
                  type="year"
                  placeholder
                  :disabled="disabled"
                ></bfe-date-picker>
                <!--请求部门/需求部门多选参照弹框-->
              <bfe-input
                ref="requestDept"
                v-if="item.type==='requestDept'"
                size="small"
                :icon='item.icon'
                :placeholder="'选择'+item.label"
                :title="searchFormInline[index]"
                v-model="searchFormInline[index]"
                @focus="selectRequestDept(index)"
                @mouseenter.native = "mouseoverInput($event, item, index)"
                @mouseleave.native = "mouseoutInput($event, item, index)"
                @click="handleIconClick(item,index)"
                :disabled="disabled"
                readonly>
              </bfe-input>
                <!--请求部门/需求部门单选参照弹框-->
              <bfe-input
                ref="requestSingleDept"
                v-if="item.type==='requestSingleDept'"
                size="small"
                :icon='item.icon'
                :placeholder="'选择'+item.label"
                :title="searchFormInline[index]"
                v-model="searchFormInline[index]"
                @focus="selectRequestSingleDept(index)"
                @mouseenter.native = "mouseoverInput($event, item, index)"
                @mouseleave.native = "mouseoutInput($event, item, index)"
                @click="handleIconClick(item,index)"
                :disabled="disabled"
                readonly>
              </bfe-input>
              <!-- 供应商库单选参照弹框 -->
                <bfe-input
                ref="requestDeptSupplier"
                v-if="item.type==='requestDeptSupplier'"
                size="small"
                :icon='item.icon'
                :placeholder="'选择'+item.label"
                :title="searchFormInline[index]"
                v-model="searchFormInline[index]"
                @focus="selectSupDept(index)"
                @mouseenter.native = "mouseoverInput($event, item, index)"
                @mouseleave.native = "mouseoutInput($event, item, index)"
                @click="handleIconClick(item,index)"
                :disabled="disabled"
                readonly>
              </bfe-input>
              <!-- 商城部门多选参照弹框 -->
              <bfe-input
                ref="shopDept"
                v-if="item.type==='shopDept'"
                size="small"
                :icon='item.icon'
                :placeholder="'选择'+item.label"
                :title="searchFormInline[index]"
                v-model="searchFormInline[index]"
                @focus="selectShopDept(index,item)"
                @mouseenter.native = "mouseoverInput($event, item, index)"
                @mouseleave.native = "mouseoutInput($event, item, index)"
                @click="handleIconClick(item,index)"
                readonly>
              </bfe-input>
              <!-- 商城部门单选参照框 -->
              <bfe-input
                ref="shopDept"
                v-if="item.type==='shopSingleDept'"
                size="small"
                :icon='item.icon'
                :placeholder="'选择'+item.label"
                :title="searchFormInline[index]"
                v-model="searchFormInline[index]"
                @focus="selectShopSingleDept(index,item)"
                @mouseenter.native = "mouseoverInput($event, item, index)"
                @mouseleave.native = "mouseoutInput($event, item, index)"
                @click="handleIconClick(item,index)"
                readonly>
              </bfe-input>
              <!--需求参照弹框-->
              <!-- <bfe-input v-if="item.type==='demandDept'"
                size="small" icon='navicon-round'
                :placeholder="'选择'+item.label"
                v-model="searchFormInline[index]"
                @focus="selectDemandDept(index)"
                @mouseenter.native = "mouseoverInput($event, item, index)"
                @mouseleave.native = "mouseoutInput($event, item, index)"
                @click="handleIconClick(item,index)"
                readonly>
              </bfe-input> -->
              <!--日期选择框-->
              <bfe-date-picker
                v-if="item.type==='date'"
                size="small"
                v-model="searchFormInline[index]"
                type="date"
                :placeholder="'选择'+item.label"
                :disabled="disabled"
                >
              </bfe-date-picker>
              <!--日期时间范围-->
              <bfe-date-picker
                v-if="item.type==='datetimerange'"
                size="small"
                v-model="searchFormInline[index]"
                type="datetimerange"
                :placeholder="'选择'+item.label"
                :disabled="disabled"
                >
              </bfe-date-picker>
               <!--日期范围-->
              <bfe-date-picker
                v-if="item.type==='daterange'"
                size="small"
                v-model="searchFormInline[index]"
                type="daterange"
                :placeholder="'选择'+item.label"
                :disabled="disabled"
                >
              </bfe-date-picker>
                <!--选择年-->
              <bfe-date-picker
                v-if="item.type==='year'"
                size="small"
                v-model="searchFormInline[index]"
                align="right"
                type="year"
                :placeholder="'选择'+item.label"
                :disabled="disabled">
              </bfe-date-picker>
              <!--选择下拉框 可搜索 单选-->
              <bfe-select v-if="item.type==='select'" size="small" v-model="searchFormInline[index]" :clearable="!item.noClearable"  placeholder="请选择" readonly  :disabled="disabled">
                <bfe-option
                  v-for="option in item.options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value">
                </bfe-option>
              </bfe-select>
              <!--多选下拉框 -->
              <bfe-select v-if="item.type==='selectMultiple'" size="small" v-model="searchFormInline[index]" multiple placeholder="请选择" :disabled="disabled">
                <bfe-option
                  v-for="option in item.options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value">
                </bfe-option>
              </bfe-select>
                <!--多选下拉框全选取消 -->
              <bfe-select v-if="item.type==='selectMultipleALL'" size="small" v-model="searchFormInline[index]" multiple placeholder="请选择">
                <div style="margin-bottom:10px;">
                  <bfe-button plain size="small" style="margin:0" @click="selectAll(item.options,index)">全选</bfe-button>
                   <bfe-button plain size="small" style="margin:0" @click="removeTag(item.options,index)">取消</bfe-button>
                </div>
                <bfe-option
                  v-for="option in item.options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value">
                </bfe-option>
              </bfe-select>
              <bfe-input v-if="item.type==='dialog'" size="small" icon="navicon-round"
              v-model="searchFormInline[index]" @click.native="dialogEvent(item.name, index)"
              @mouseenter.native="mouseoverInput($event, item, index)"
              @mouseleave.native="mouseoutInput($event, item, index)" :disabled="disabled"></bfe-input>

              <bfe-input
                ref="selectcataloguedialog"
                v-if="item.type==='cataloguedialog'"
                size="small"
                :icon='item.icon'
                :placeholder="'选择'+item.label"
                :title="searchFormInline[index]"
                v-model="searchFormInline[index]"
                @focus="selectcataloguedialog(index)"
                @mouseenter.native = "mouseoverInput($event, item, index)"
                @mouseleave.native = "mouseoutInput($event, item, index)"
                @click="handleIconClick(item,index)"
                readonly>
              </bfe-input>
              <!-- 电商/协议品类 -->
              <bfe-input
                ref="selectEcDialog"
                v-if="item.type==='selectEcDialog'"
                size="small"
                :icon='item.icon'
                :placeholder="'选择'+item.label"
                :title="searchFormInline[index]"
                v-model="searchFormInline[index]"
                @focus="selectEcDialog(item, index)"
                @mouseenter.native = "mouseoverInput($event, item, index)"
                @mouseleave.native = "mouseoutInput($event, item, index)"
                @click="handleIconClick(item,index)"
                :disabled="disabled"
                readonly>
            </bfe-input>
            </bfe-form-item>
        </transition>
      </template>
      <bfe-form-item class="btn">
        <bfe-button type="primary" size="small" @click="onSubmit">查询</bfe-button>
        <bfe-button type="default" size="small" @click="resetSearchformInline"  v-if="!noresetHidden">重置</bfe-button>
         <bfe-button type="primary" size="small" @click="handleCustom" v-if="custom.btn">{{custom.name}}</bfe-button>
         <bfe-button type="primary" size="small" v-if="showExpand" @click="showAll=!showAll">{{showAll?'收起':'展开'}}</bfe-button>
      </bfe-form-item>
    </bfe-form>
    <requestDept  ref="requestDept"  :title="deptTitle" @getNodes="getNodes"></requestDept>
    <requestDept  ref="requestSingleDept"  :title="deptTitle" treeType="single" @getNodes="getSingleNodes"></requestDept>
    <Cataloguedialog v-if="showCatalogue" ref="catalogueDialog" @getCatalogue="getCatalogue" @closeCatalogDialog="closeCatalogDialog"></Cataloguedialog>
    <shopDeptDialog ref="shopDept" :title="deptTitle" :scoped="treeScoped" @getNodes="getDept" :orgRange="orgRange"></shopDeptDialog>
    <shopDeptDialog ref="shopSingleDept" :scoped="treeScoped" :title="deptTitle" treeType="single" @getNodes="getSingleDept" :orgRange="orgRange"></shopDeptDialog>
    <EcatalogueDialog ref= "EcDialog" @getNodes="getEcNodes" :proType="proType"></EcatalogueDialog>
    <requestDeptSupplier ref="requestDeptSupplier" :title="deptTitle" @getNodes="getSupNodes"></requestDeptSupplier>
    <!-- <requestDept ref="demandDept" title="需求部门" @getNodes="getNodes"></requestDept> -->
  </div>
</template>

<script>
import RequestDept from '@/components/request-dept-dialog';
import Cataloguedialog from "@/components/catalogueDialog"
import shopDeptDialog from "@/components/shop-dept-dialog"
import EcatalogueDialog from "@/components/E-catalogueDialog"
import requestDeptSupplier from'@/components/request-dept-supplier'
import lodash from "lodash";
export default {
  name: 'FormIndex',

  components: {
    RequestDept,
    Cataloguedialog,
    shopDeptDialog,
    EcatalogueDialog,
    requestDeptSupplier
  },
  props: {
    data: {
      type: Array,
      default: () => [
        {
          label: '', model: '', type: '', icon: ''
        }
      ]
    },
    lableWidth: {
      type: String,
      default: '130px'
    },
    initFormData: {
      type: Array,
      default: () => []
    },
     custom:{
      type:Object,
      default: () =>{return {btn:false}}
    },
    showExpand:{
      type:Boolean,
      default:false,
    },
    noresetHidden:{
      type:Boolean,
      default:false,
    },
    disabled:{
      type:Boolean,
      default:false,
    },
  },

  data() {
    return {
      showAll:false,
      flag: false,
      searchFormInline: [],
      inline: {},
      selectedOrgArray: [],
      requestDeptIcon: 'navicon-round',
      deptTitle: '请选择部门',
      showRequsest: false,
      showCatalogue:false,
      yearselectDate: new Date().getFullYear().toString(),
        pickerOptions2: {
        shortcuts: [{
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const week = end.getDay()
            const millisecond=1000*60*60*24
            const minusDay=week!=0 ?week-1 :6
            const monday=new Date(end.getTime() - minusDay*millisecond)
            const sunday=new Date((end.getTime() - minusDay*millisecond)+millisecond*6)
            const start=new Date(monday)
            start.setHours(0,0,0,0)
            picker.$emit('pick', [start, sunday]);
          }
        }, {
          text: '本月',
          onClick(picker) {
            const nowDate = new Date();
            const nowMonth = nowDate.getMonth()
            //获取当前年份的前四位
            const nowYear=nowDate.getFullYear()
            //求出本月的第一天
            const start=new Date(nowYear,nowMonth,1)
            const monthObject=new Map([
              [1,31],[2,27],[3,30],[4,30],[5,31],[6,30],[7,31],[8,31],[9,30],[10,31],[11,30],[12,31],
            ])
            //当前月份的天数
            let nowMonthDays=0
            let nowMonthS=nowMonth+1
            monthObject.forEach((value,key)=>{
              if((nowMonthS)==key){
                nowMonthDays=value
              }
            })
            if(nowMonthS==2 &&nowYear.toString().slice(-2)=='00'&&nowYear/400==0){
              nowMonthDays=nowMonthDays+1
            }else if(nowMonthS==2&&nowYear.toString().slice(-2)!='00'&&nowYear/400==0){
                nowMonthDays=nowMonthDays+1
            }
            const end=new Date(nowYear,nowMonth,nowMonthDays)
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本季度',
          onClick(picker) {
              const nowYear=new Date().getFullYear()
              const nowMonth = new Date().getMonth()
              const q=parseInt(nowMonth/3)
              let qs=new Date(nowYear,(q-0)*3,1)
              let qe=new Date(nowYear,(q+1)*3,0)
            picker.$emit('pick', [qs, qe]);
          }
        }]
      },
      treeScoped: 'BXOD',
      proType: 'EC', // EC 电商品类  AG协议品类
      orgRange: ''
    }
  },

  computed: {},

  watch: {
    data: {
      handler(newV) {
        this.data = newV
        this.data.forEach((item, index)=>{
          if(item.type==='selectMultiple'||item.type==='selectMultipleALL'){
            this.searchFormInline[index]=[]
          }
        })
      },
      deep: true,
      immediate: true
    },
    searchFormInline: {
      handler(newV) {
        this.searchFormInline = newV
        this.getData()
      },
      deep: true,
      immediate: true
    },
     showAll:{
      handler(newV) {
      this.data.forEach(item=>{
        if(typeof(item.expand)=='boolean'){
          item.expand=!item.expand
        }
      })
      },
    },
  },

  created() {
    this.changeYearselect(new Date().getFullYear().toString())
  },

  mounted() {
    this.$nextTick(() => {
      this.searchFormInline = lodash.clone(this.initFormData) || []
       this.data.forEach((item, index)=>{
          if(item.type==='selectMultiple'||item.type==='selectMultipleALL'){
            this.searchFormInline[index]=[]
          }
        })
    })
  },

  destroyed() {},

  methods: {
     handleCustom(){
      this.$emit('customFun',)
    },
     removeTag(options,index){
     this.$set(this.searchFormInline, index,[])
    },
    selectAll(options,index){
      let data=options.map(v=>v.value)
       this.$set(this.searchFormInline, index,data)
    },
    changeYearselect (val) {
      this.yearselectDate = val
      this.data.map((v, i) => {
        if (v.type == 'yearselect') {
          this.searchFormInline[i] = val
        }
      })
      this.getData()
    },
    selectRequestDept(index) {
      this.$refs.requestDept.searchIndex = index
      // console.log(this.selectedOrgArray)
      if(this.selectedOrgArray[index]&&this.selectedOrgArray[index].length>0){
        this.$refs.requestDept.selectedDept = this.selectedOrgArray[index]
      } else {
        this.$refs.requestDept.selectedDept = []
      }
      // debugger
      console.log(this.$refs.requestDept.selectedDept)
      this.$refs.requestDept.dialogVisible = true
      this.$refs.requestDept.openedStatus = true
    },
    // 采购单个部门
    selectRequestSingleDept(index) {
      this.$refs.requestSingleDept.searchIndex = index
      if(this.selectedOrgArray[index]&&this.selectedOrgArray[index].length>0){
        this.$refs.requestSingleDept.selectedDept = this.selectedOrgArray[index]
      } else {
        this.$refs.requestSingleDept.selectedDept = []
      }
      console.log(this.$refs.requestSingleDept.selectedDept)
      this.$refs.requestSingleDept.dialogVisible = true
      this.$refs.requestSingleDept.openedStatus = true
    },
    //单个供应商库部门查询
    selectSupDept(index){
        this.$refs.requestDeptSupplier.searchIndex = index
      if(this.selectedOrgArray[index]&&this.selectedOrgArray[index].length>0){
        this.$refs.requestDeptSupplier.selectedDept = this.selectedOrgArray[index]
      } else {
        this.$refs.requestDeptSupplier.selectedDept = []
      }
      console.log(this.$refs.requestDeptSupplier.selectedDept)
      this.$refs.requestDeptSupplier.dialogVisible = true
      this.$refs.requestDeptSupplier.openedStatus = true
      this.$refs.requestDeptSupplier.getAreaList()
    },
    // 商城部门多选
    selectShopDept(index, item) {
      // debugger
      this.$refs.shopDept.searchIndex = index
      if(this.selectedOrgArray[index]&&this.selectedOrgArray[index].length>0){
        this.$refs.shopDept.selectedDept = this.selectedOrgArray[index]
      } else {
        this.$refs.shopDept.selectedDept = []
      }
      console.log(this.$refs.shopDept.selectedDept)
      this.deptTitle = "请选择" + item.label
      this.orgRange = item.orgRange
      this.treeScoped = item.treeScoped || 'BXOD'
      this.$refs.shopDept.dialogVisible = true
      this.$refs.shopDept.openedStatus = true
    },
    // 商城部门单选
    selectShopSingleDept(index,item) {
      this.$refs.shopSingleDept.searchIndex = index
      if(this.selectedOrgArray[index]&&this.selectedOrgArray[index].length>0){
        this.$refs.shopSingleDept.selectedDept = this.selectedOrgArray[index]
      } else {
        this.$refs.shopSingleDept.selectedDept = []
      }
      console.log(this.$refs.shopSingleDept.selectedDept)
      this.deptTitle = "请选择" + item.label
      this.orgRange = item.orgRange
      this.treeScoped = item.treeScoped || 'BXOD'
      this.$refs.shopSingleDept.dialogVisible = true
      this.$refs.shopSingleDept.openedStatus = true
    },
    selectcataloguedialog(index) {
      // debugger
      // this.$refs.catalogueDialog.catalogueDialogVisible = true
      this.showCatalogue = true
      this.$nextTick(() => {
        this.$refs.catalogueDialog.searchIndex = index
      })
    },
    selectEcDialog(item, index) {
      this.proType = item.proType
      this.$refs.EcDialog.searchIndex = index
      this.$refs.EcDialog.dialogVisible = true
    },
    getEcNodes(nodes, index) {
      if(nodes && nodes.length) {
        let name = ''
        let ids = []
        nodes.forEach(item => {
          name = name + item.name + ','
          ids.push(item.id)
        })
        name = name.substring(0, name.lastIndexOf(','))
        this.$set(this.searchFormInline, index, name)
        this.selectedOrgArray[index] = ids
      }
      this.$forceUpdate()
    },
    selectDemandDept(index) {
      // this.$refs.demandDept.searchIndex = index
      // this.$refs.demandDept.dialogVisible = true
    },
    resetSearchformInline() {
      this.searchFormInline = this.$options.data().searchFormInline
      this.yearselectDate = ''
      this.selectedOrgArray = []
        this.data.forEach((item, index)=>{
          if(item.type==='selectMultiple'||item.type==='selectMultipleALL'){
            this.searchFormInline[index]=[]
          } else if(item.type === 'requestDept' || item.type==='shopDept' || item.type=='shopSingleDept' || item.type=='requestSingleDept' || item.type === 'yearselect' || item.type=='selectEcDialog') {
            this.searchFormInline[index] = null
          }
        })
      this.$forceUpdate()
      this.getData()
      this.onSubmit(1);
    },
    onSubmit(type) {
      this.$emit('onSubmit', this.inline,type)
    },
    getData() {
      this.data.forEach((item, index) => {
        if(item.type === 'requestDept' || item.type==='shopDept' || item.type === 'selectEcDialog') {
          this.inline[item.model] = this.selectedOrgArray[index] || []
        } else if(item.type=='shopSingleDept' || item.type=='requestSingleDept'||item.type=='requestDeptSupplier') {
          this.inline[item.model] = this.selectedOrgArray[index] || null
        }else {
          this.inline[item.model] = this.searchFormInline[index]
        }
      })
    },
    getNodes(nodes, index) {
      if(nodes.length) {
        let deptName = ''
        let deptCode = []
        nodes.forEach(item => {
          deptName = deptName + item.orgName + ','
          deptCode.push(item.orgRefno)
        })
        deptName = deptName.substring(0, deptName.lastIndexOf(','))
        this.$set(this.searchFormInline, index, deptName)
        this.selectedOrgArray[index] = deptCode
      }
      this.$forceUpdate()
    },
    getSingleNodes(data, treeName, index) {
      this.$set(this.searchFormInline, index, data.orgName)
      this.selectedOrgArray[index] = data.orgRefno
      this.$forceUpdate()
    },
    getSupNodes(data, treeName, index){
      this.$set(this.searchFormInline, index, data.orgName)
      this.selectedOrgArray[index] = data.orgRefno
      this.$forceUpdate()
    },
    getDept(nodes, index) {
      if(nodes.length) {
        let deptName = ''
        let deptCode = []
        nodes.forEach(item => {
          deptName = deptName + item.orgName + ','
          deptCode.push(item.orgRefno)
        })
        deptName = deptName.substring(0, deptName.lastIndexOf(','))
        this.$set(this.searchFormInline, index, deptName)
        this.selectedOrgArray[index] = deptCode
      }
      this.$forceUpdate()
    },
    getSingleDept(data, treeName, index) {
      console.log(data, treeName,index)
      this.$set(this.searchFormInline, index, data.orgName)
      this.selectedOrgArray[index] = data.orgRefno
      this.$forceUpdate()
    },
    mouseoverInput(e, item, index) {
      // console.log(e)
      if(this.searchFormInline[index]) {
        item.icon = "circle-close"
      } else {
        item.icon = 'navicon-round'
      }
    },
    mouseoutInput(e, item) {
      item.icon = 'navicon-round'
    },
    handleIconClick(item,index) {
       console.log(item)
      if(item.icon=='circle-close'){

        if(item.type=='requestDeptSupplier' || item.type=='requestSingleDept'){
          this.searchFormInline[index] = null
          this.selectedOrgArray[index] = null
          this.inline[item.model] = null
        } else {
          this.searchFormInline[index] = null
          this.selectedOrgArray[index] = []
          this.inline[item.model] = []
        }
      }
      this.$forceUpdate()
    },
    getCatalogue(data,searchIndex) {
      this.$set(this.searchFormInline, searchIndex, data.plName || null)
    },
    closeCatalogDialog() {
      this.showCatalogue = false
    }
  }
}

</script>

<style scoped>
.form-index .btn{
  /* display: flex;
  justify-content: flex-end; */
}

</style>
<style scoped>
  .bfe-form-item{
    margin-bottom: 10px;
  }
::v-deep .bfe-input__icon+.bfe-input__inner{
  padding-right: 10px!important;
}
::v-deep .bfe-select__tags {
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 1px;
}

</style>
<style >
.form-index .bfe-form-item__label{
  display: inline-block !important;
  text-align: right !important;
}
</style>