shujuju-web/src/components/DynamicFormsteo/index.vue

<template>
  <!-- <el-row  class="row-bg"> -->
  <el-col :span="ieug !== null? ieug : 8 "  >
  <el-form-item label-width="140px" :label="formConfig.columnComment" style="display: inline-block;" :prop="formConfig.columnName">
    <!-- 输入框 -->
    <el-input v-if="formConfig.htmlType == 'input'" @change="iChange" v-model="config[formConfig.columnName]" :placeholder="'请输入'+formConfig.columnComment"
      clearable @keyup.enter.native="handleQuery" :disabled="formConfig.disabshow" />
    <!-- 多行输入框 -->
    <el-input v-if="formConfig.htmlType == 'textarea'" @change="iChange" type="textarea" v-model="config[formConfig.columnName]"
      :placeholder="'请输入'+formConfig.columnComment" clearable @keyup.enter.native="handleQuery" :disabled="formConfig.disabshow" />
    <!-- 下拉框 -->
   <el-select v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'select'&&(!formConfig.fkInfo)"
      filterable :placeholder="'请输入'+formConfig.columnComment" :disabled="formConfig.disabshow">
      <el-option v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel"
        :value="itemChild.dictValue">
      </el-option>
    </el-select>
    <!-- 下拉框搜索 -->
   <el-select :disabled="formConfig.disabshow" v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'select'&&(formConfig.fkInfo)"
      filterable remote :remote-method="remoteMethod" :loading="loading" :placeholder="'请输入'+formConfig.columnComment">
     <el-option v-for="itemChild in filterList" :key="itemChild[formConfig.fkInfo.fkColumnName]" :label="itemChild[formConfig.fkInfo.dkColumnName]"
       :value="itemChild[formConfig.fkInfo.fkColumnName]">
     </el-option>

    </el-select>
    <!-- 树形结构 -->
   <div v-if="formConfig.htmlType == 'cascader'&&(!formConfig.fkInfo)">
        <el-cascader
           v-model="config[formConfig.columnName]"
           :options="formConfig.sysDictData"
           :placeholder="'请选择'+formConfig.columnComment"
           @getCheckedNodes = 'getCheckedNodes'
           @change="handleChangety(config[formConfig.columnName])"
           :props="{checkStrictly: true,value:'dictValue',label:'dictLabel',children: 'children'}"
           ></el-cascader>
   </div>
   <!-- <div class="head-container" > -->
<!-- <div class="head-container">
       <el-tree
         :data="deptOptions"
         :props="defaultProps"
         :expand-on-click-node="false"
         :filter-node-method="filterNode"
         ref="tree"
         node-key="id"
         :current-node-key="5"
         @node-click="handleNodeClick"
         :highlight-current = 'true'
         :default-expanded-keys="[2, 3]"
       />
     </div> -->
     <!-- <treeselect  v-model="config[formConfig.columnName]" :options="deptOptionsthre" :normalizer="normalizerty" :flat="true" @select="djieskletwo" :maxHeight="350" :placeholder="'请输入'+formConfig.columnComment" /> -->

    <!-- 复选框 -->
    <el-checkbox-group :disabled="formConfig.disabshow" v-model="config" v-if="formConfig.htmlType == 'checkbox'">
      <el-checkbox @change="handleCheckedCitiesChange" v-for="itemChild in formConfig.sysDictData" :label="itemChild.dictValue"
        :key="itemChild.dictLabel">
        {{itemChild.dictLabel}}
      </el-checkbox>
    </el-checkbox-group>
    <!-- 单选框 -->
    <el-radio-group :disabled="formConfig.disabshow" v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'radio'">
      <el-radio v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictValue">{{itemChild.dictLabel}}</el-radio>
    </el-radio-group>
    <!-- 时间控件日期 -->
    <el-date-picker :disabled="formConfig.disabshow" @change="iChange" v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'datetime-date'"
      type="date" :placeholder="'请输入'+formConfig.columnComment">
    </el-date-picker>
    <!-- 时间控件小时分钟 -->
    <el-date-picker :disabled="formConfig.disabshow" @change="iChange" v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'datetime'"
                    type="datetime" :placeholder="'请输入'+formConfig.columnComment"  value-format="yyyy-MM-dd hh:mm:ss" >
    </el-date-picker>
    <!-- 上传图片 -->
    <el-upload :disabled="formConfig.disabshow" v-if="formConfig.htmlType == 'imageUpload'" :headers="{Authorization: 'Bearer ' + getToken()}"
      :action="process + '/boman-file/upload'" :file-list="config" list-type="picture-card" :on-preview="handlePictureCardPreview"
      :on-success="upImageFn" :on-remove="reseImage">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :disabled="formConfig.disabshow" :visible.sync="dialogVisible" v-if="formConfig.htmlType == 'imageUpload'">
      <img :src="dialogImageUrl" alt="">
    </el-dialog>
    <!-- 上传文件 -->
    <el-upload :disabled="formConfig.disabshow" class="upload-demo" :headers="{Authorization: 'Bearer ' + getToken()}"
      v-if="formConfig.htmlType == 'fileUpload'" :action="process + '/boman-file/upload'" :on-change="handleChange"
      :on-success="upImageFn" :on-error="err" :on-remove="reseImage" :file-list="config">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png/txt/word/pdf/exe/RAR/ZIP文件，且不超过10MB</div>
    </el-upload>
    <!-- 富文本 -->
    <editor :disabled="formConfig.disabshow" v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'editor'"
      :min-height="192" />
  </el-form-item>
  </el-col>
  <!-- </el-row> -->
</template>

<script>
  const defaultSettings = require('@/settings.js')
  import Editor from '@/components/Editor';
  import {
    listIndexfou,listIndextime
  } from "@/api/tool/gen";
  import {getUserProfile, } from "@/api/system/config";
  import {
    getToken
  } from "@/utils/auth";
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    components: {  Treeselect},
    data() {
      return {
        fileList: [],
        defaultSettings,
        dialogImageUrl: '',
        process: process.env.VUE_APP_BASE_API,
        dialogVisible: false,
        disabled: false,
        loading: false,
        filterList: [],
        value:[],
        config: {},
        aliemg: {
          table: '',
          orderBy: 'create_time desc',
          pageNo: 1,
          pageSize: 10,
          fixedData: {
            condition: {}
          },
          ieug:8
        },
        // 部门名称
        deptName: undefined,
         defaultProps: {
                  children: 'children',
                  label: 'label'
                },
                huetge:{},
                leavefrom_starttime:{
                  leavefrom_start_time:undefined
                },
                leavefrom_end:{
                  leavefrom_end_time:undefined
                },
        deptOptions: [],
        oieutgs:[],
        shoeuw:true,
        jueg:0
      }
    },
    components: {
      Editor
    },
    props: {
      queryData: {
        type: Object,
        default: res => {
          return {
            showData: []
          }
        }
      },
      formConfig: {
        type: Object,
        required: true,
        'default': {
          sysDictData: []
        }
      },
      type: {
        type: Number,
        default: 1
      },
    },
    created() {
      this.config = {}

      if(this.type){
        if(this.formConfig.tableid == -1){
          // console.log(-1)
          // console.log(this.formConfig.mask.slice(1,2))
          this.shoeuw = false
          if(this.formConfig.readonly == true){
            this.formConfig.disabshow = true
          }else if(this.formConfig.mask.slice(1,2) == '0' || this.formConfig.isonliy == true){
               this.formConfig.disabshow = true
          }else{
            this.formConfig.disabshow = false
          }
          if(this.formConfig.fkInfo == null){
            this.formConfig.fkInfo=false
          }
        }else{
          // console.log(0)
          this.shoeuw = true
          if(this.formConfig.readonly == true){
            this.formConfig.disabshow = true
          }else if(this.formConfig.mask.slice(3,4) == '0' || this.formConfig.isonliy == true){
               this.formConfig.disabshow = true
          }else{
            this.formConfig.disabshow = false
          }
          if(this.formConfig.fkInfo == null){
            this.formConfig.fkInfo=false
          }
        }
      }
      if(this.formConfig.tableColumnuy == null){
        this.ieug = null
      }else{
        this.ieug = 24 / (this.formConfig.tableColumnuy -0)
      }
      this.init()
      if (this.formConfig.extendedAttributes) {
        let extend = JSON.parse(this.formConfig.extendedAttributes)
        this.extFn(extend.col, extend.comp)
      }
      if(this.formConfig.htmlType == 'imageUpload' || this.formConfig.htmlType == 'fileUpload'){
        this.config = []
        if(this.formConfig.columnValue !== null && this.formConfig.columnValue !== '[]'  ){
          this.config = JSON.parse(this.formConfig.columnValue)
        }

      }
    },
   watch: {
     'config': {
       handler: function() {
         this.$emit('modelFn', this.formConfig.columnName, this.config[this.formConfig.columnName])
       },
       deep: true
     },
     'queryData': {
       handler: function() {
         if (this.formConfig.extendedAttributes) {
           let extend = JSON.parse(this.formConfig.extendedAttributes)
           this.formConfig.extend=extend
           console.log(this.jueg,789)
           this.extFn(extend.col, extend.comp)
         }
       },
       deep: true
     },
     // 根据名称筛选部门树
     deptName(val) {
       console.log(this.$refs.tree)
       this.$refs.tree.filter(val);
     }
   },
    mounted() {
      // this.getUser()
      console.log(this.formConfig)
    },
    methods: {
      iChange(val){
        console.log(val,45)
        if(this.formConfig.isUseExtend){
          this.shoeuw = false
          this.jueg = 1
          // console.log( this.shoeuw)
          this.$emit('iChange',this.formConfig.columnName,val)
        }
      },
      extFn(col, comp) {
        // console.log(col, this.queryData.showData,comp,45)
        console.log(this.formConfig.tableName)
         let str = this.getDyn(col, this.queryData.showData,comp)
        console.log(str,457)
        this.huetge.dept_id = this.formConfig.depdid
        if(this.shoeuw == false){
          console.log(this.shoeuw)
          let str = this.getDyn(col, this.queryData.showData,comp)
          if(str !== undefined){
            let hue = []
            hue = str.split('-')

            this.huetge.leavefrom_end_time = str.substring(0,19)
            this.huetge.leavefrom_start_time = str.substring(20)
            listIndextime( this.huetge).then(response => {
              if (response.code == 200) {
                this.config[this.formConfig.columnName] = response.data
                if(this.formConfig.tableName =='boman_temp_leaveform'){
                  // consolelog(123456)
                  // if(){

                  // }
                }
              }
              this.loading = false;
            })
            console.log(this.huetge)
          }
        }else{
          console.log(this.jueg)
          console.log(this.formConfig.columnName,12)
          // let str = this.getDyn(col, this.queryData.showData,comp)
           this.queryData.showData.filter(route => {
             route.hrChildren.filter(routerst => {
               if (routerst.columnName == 'leavefrom_start_time') {
                 console.log(routerst.columnValue)
                 this.huetge.leavefrom_start_time = routerst.columnValue
               }
               if(routerst.columnName == 'leavefrom_end_time'){
                  this.huetge.leavefrom_end_time = routerst.columnValue
               }

             })
           })
           listIndextime( this.huetge).then(response => {
             if (response.code == 200) {
               this.config[this.formConfig.columnName] = response.data
             }
             this.loading = false;
           })

        }

      },
      eval(code){
        let fun = new Function(`return ${code}`)();
        return fun
      },
      listIndexfouFn() {
        listIndexfou(this.aliemg).then(response => {
          if (response.data) {
            this.filterList = response.data.rows
            console.log(this.filterList,876)
          }
          this.loading = false;
        })
      },
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          this.aliemg.fixedData.condition[this.formConfig.fkInfo.dkColumnName] = query
          this.listIndexfouFn()
        } else {
          this.filterList = [];
        }
      },
      upImageFn(res, file) {
        this.config.push(res.data);
        console.log(this.config)
      },
      err(){
       console.log(35)
      },
      init() {
        if (this.formConfig.htmlType == 'checkbox' || this.formConfig.htmlType == 'imageUpload' || this.formConfig.htmlType ==
          'fileUpload') {
          this.config = []
        } else {
          this.$set(this.config, this.formConfig.columnName, ((this.formConfig.columnValue ? this.formConfig.columnValue :
            this.formConfig.defaultValue) || ''))
        }
        if (this.formConfig.htmlType == 'cascader'){
          console.log(this.formConfig.sysDictData,987)

          for(var i = 0 ; i< this.formConfig.sysDictData.length; i++){
            this.getChilds(this.formConfig.sysDictData[i])
          }

        }


        if (this.formConfig.fkInfo) {
          this.aliemg.table = this.formConfig.fkInfo.fkTableName
          if (this.formConfig.fkInfo.value) {
            this.aliemg.fixedData.condition[this.formConfig.fkInfo.dkColumnName] = this.formConfig.fkInfo.value
            this.formConfig.fkInfo.name = this.formConfig.fkInfo.name - 0
            this.formConfig.columnValue  = this.formConfig.columnValue - 0
            console.log(this.formConfig.fkInfo.name,this.formConfig.columnValue)
          }
          this.listIndexfouFn()
        }
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
      getToken() {
        return getToken()
      },
      reseImage(file, fileList) {
        let urls = ""
        if (file.response) {
          urls = file.response.url
        } else {
          urls = file.url
        }
        for (let i = this.config.length - 1; i >= 0; i--) {
          if (this.config[i].url == urls) {
            this.config.splice(i, 1);
          }
        }
      },
      reseImage1(file, fileList) {
        let urls = ""
        if (file.response) {
          urls = file.response.url
        } else {
          urls = file.url
        }
        for (let i = this.config.length - 1; i >= 0; i--) {
          if (this.config[i].url == urls) {
            this.config.splice(i, 1);
          }
        }
      },
      handlePictureCardPreview(file) {
        console.log(file)
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      handleQuery() {
        this.$emit('btns')
      },
      handleCheckedCitiesChange(value) {
        console.log(this.config)
      },
      /** 转换组数据结构 */
      normalizerty(node) {
        return {
          id: node.id,
          label: node.groupName,
        };
      },
      djieskletwo(node, instanceId) {
        // this.members(node.id);
        // this.elezu = node.id
        console.log(node, instanceId);
      },
      // 筛选节点
      filterNode(value, data) {
        console.log(value,data)
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        console.log(data);
        // this.queryParams.deptId = data.id;
        // this.staff(data.id);
        // this.quandet = false
        // this.getList();
      },
      handleChangety(value,ik){
        // if(value.length ==1){
        //   this.queryParams.referralList[1].sysDeptId = value.join(',')
        // }else{
        //   this.queryParams.referralList[1].sysDeptId = value[value.length-1]
        // }
        //1
      console.log(value,ik)
      },
      getCheckedNodes(value){
        // console.log(value)
      },
      formateDate(datetime) {
          function addDateZero(num) {
              return (num < 10 ? "0" + num : num);
          }
          let d = new Date(datetime);
          let formatdatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate()) + ' ' + addDateZero(d.getHours()) + ':' + addDateZero(d.getMinutes()) + ':' + addDateZero(d.getSeconds());
          return formatdatetime;
      },
      // 递归
      getChilds(data){
        console.log(data,67)
        if(data !== null){
          console.log(7)
          if(data.children.length == 0){
            data.children = undefined
          }else{
            for(var i = 0 ; i< data.children.length; i++){
              if(data.children[i].length == 0){
                // data.children[i] = undefined
                // console.log(data.children[i],8)
              }else{
                // console.log(data.children[i],9)
                this.getChilds(data.children[i])
              }
              // console.log(data.children[i],10)
            }
          }

        }

        // if(data.children.length == 0){
        //   data.children = null
        // }else{
        //   this.getChilds(data.children)
        // }
      },
      getUser() {
        getUserProfile().then(response => {
          this.huetge.dept_id = response.data.deptId;
        });
      },
    }
  }
</script>

<style>
</style>