yxk-electronic-archives/src/views/components/category/PreviewForm.vue

<template>
  <div class="preview-content right-preview">
    <el-form ref="addOrUpdateForm" :model="addOrUpdateForm" :rules="rules" :validate-on-rule-change="false" label-width="125px">
      <el-row :gutter="4" style="padding:0 20px">
        <draggable v-bind="{draggable:'.drag-item',animation:500}" :disabled="!isDraggable" @update="datadragEnd">
          <el-col v-for="(item,index) in formPreviewData" v-show="item.fieldName !== 'barcode'" :key="index" :class="['drag-item',item.fieldName === 'barcode'? 'barcode-input':'']" :span="item.isLine || item.fieldName === 'barcode' ? 24 : 12">
            <el-form-item :label="item.fieldCnName" :prop="item.fieldName">
              <!-- select  :load-options="loadOptions"-->
              <treeselect
                v-if="item.isInputClass === 'select'"
                v-model="addOrUpdateForm[item.fieldName]"
                :options="item.options"
                :normalizer="normalizer"
                :clearable="false"
                placeholder=""
                :style="{ width: item.editLength+'px'}"
                :disabled="isDisabled"
                :validate-event="!isDisabled"
                no-options-text="无数据"
                @select="selectTree"
                @open="openTree(item)"
              >
                <div slot="value-label" slot-scope="{ node }">{{ getAutoNameUnknown(node.label) }}</div>
              </treeselect>
              <!-- text / number / textarea / popover -->
              <!-- :validate-event="isDisabled" -->
              <el-input
                v-if="item.isInputClass !== 'select' && item.isInputClass !== 'date' && item.fieldName !== 'barcode' "
                v-model="addOrUpdateForm[item.fieldName]"
                :type="item.isInputClass === 'popover'? 'text' : item.isInputClass"
                :rows="item.isInputClass === 'textarea' ? 3 : ''"
                :class="{'input-popover':(item.isInputClass === 'popover')}"
                :style="{ width: item.editLength+'px'}"
                :disabled="isDisabled"
                :validate-event="!isDisabled"
                @keyup.enter.native="isRepeatHandle(item)"
                @input="autoAddZero(item.isFilling, item.fieldName, addOrUpdateForm[item.fieldName], item.fillingDigit)"
                @blur="isRepeatHandle(item)"
              >
                <i v-if="item.isInputClass === 'popover'" slot="suffix" class="el-input__icon iconfont icon-weibiaoti-2" @click="handleCurrentFieldName(item)" />
              </el-input>
              <!-- date -->
              <el-date-picker v-if="item.isInputClass === 'date'" v-model="addOrUpdateForm[item.fieldName]" type="date" align="right" format="yyyy-MM-dd" placeholder="" :clearable="false" :style="{ width: item.editLength+'px'}" :disabled="isDisabled" :validate-event="!isDisabled" />
            </el-form-item>
          </el-col>
        </draggable>
      </el-row>
      <el-row v-if="!isHasCode && isDesFormType !== 'prearchiveLibrary'" class="preview-form-bottom">
        <el-col v-for="(item,index) in formPreviewData.slice(formPreviewData.length-1,formPreviewData.length)" :key="'barcode'+index">
          <el-form-item :label="item.fieldCnName" :prop="item.fieldName">
            <el-input v-model="addOrUpdateForm[item.fieldName]" type="text" style="width: 510px" :disabled="isDisabled" :validate-event="!isDisabled" @keyup.enter.native="isRepeatHandle(item)" @blur="isRepeatHandle(item)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="isDesFormType === 'prearchiveLibrary'" class="preview-form-bottom">
        <el-col>
          <el-form-item label="电子原件" prop="fileOriginal" class="prearch-upload">
            <el-input
              v-model="fileOriginal"
              type="text"
              style="width: 446px"
              readonly
            />
            <div class="upload-btn">
              <input id="upFile" type="file" name="upFile" @change="changeFile($event)">
              <el-button size="small" type="primary"><i class="iconfont icon-shangchuan" />上传</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 弹框形式的内容展示 -->
    <el-dialog class="edit-form-dialog" :append-to-body="true" :visible="popoverVisible" :before-close="handleClose" :close-on-click-modal="false" title="字典列表">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-table ref="popoverTable" :data="popoverTableData" highlight-current-row row-key="id" :tree-props="{children: 'childMenus', hasChildren: 'hasChildren'}" style="width: 100%;" @selection-change="handleSelectionChange" @row-click="clickRowHandler">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="dicName" label="字典名称" />
          <el-table-column prop="dicCode" label="字典代码" />
          <el-table-column prop="dicExplain" label="内容说明" />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { crud } from '@crud/crud'
import { edit, FetchDoeditIsRepeat } from '@/api/archivesManage/archivesList'
import { prearchEdit, FetchReDoeditIsRepeat } from '@/api/prearchiveLibrary/prearchiveLibrary'
import { getNoFormatField } from '@/api/system/category/fileNoFormat'
import draggable from 'vuedraggable'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { FetchFindAllSubsetById } from '@/api/archivesConfig/dictDetail'
import { parseTime, getCurrentTime } from '@/utils/index'

export default {
  name: 'PreviewForm',
  components: { draggable, Treeselect },
  mixins: [crud()],
  props: {
    isDisabled: {
      type: Boolean,
      required: true
    },
    formPreviewData: {
      type: Array,
      required: true
    },
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    },
    arcId: {
      type: String,
      default: ''
    },
    parentsId: {
      type: String,
      default: ''
    },
    isHasCode: {
      type: Boolean,
      required: true
    },
    isDraggable: {
      type: Boolean,
      default: false
    },
    isDesFormType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileOriginal: null,
      addOrUpdateForm: {
      },
      rules: {
      },
      popoverTableData: [], // popover - popoverTableData
      popoverVisible: false, // popover - visible
      currentFieldName: null, // popover 当前fieldName
      treeCurrentFiled: null,
      categoryId: null,
      setParentsId: null,
      result: null,
      autoMatic: null,
      // isType: 'category',
      normalizer(node) {
        if (node.childMenus == null || node.childMenus === 'null') {
          delete node.childMenus
        }
        return {
          id: node.dicName,
          label: node.dicName,
          children: node.childMenus
        }
      },
      file: null, // 附件 change
      fileNames: '', // 附件 - name
      formatType: '', // 附件 - type
      postfix: '', // 附件 - 文件后缀
      fileSize: '', // 附件 - 大小
      filePath: '', // 附件 - path
      px: '', // 附件 - 分辨率
      nowDate: '', // 当前时间
      fileJsonString: null
    }
  },
  watch: {
    selectedCategory: function(newValue, oldValue) {
    },
    arcId: function(newValue, oldValue) {
    },
    parentsId: function(newValue, oldValue) {
    },
    isDesFormType: function(newValue, oldValue) {
    },
    formPreviewData: function() {
      this.editFormRow()
      // 区分 门类著录项 和 档案管理
      if (this.isDesFormType === 'category') {
        this.FetchNoFormatField(this.selectedCategory.id)
      }
    }
  },
  created() {
    this.editFormRow()
  },
  mounted() {
    // if (this.isType !== 'arcives') {
    //   this.FetchNoFormatField(this.selectedCategory.id)
    // }
  },
  methods: {
    // 递归查询字典名称对应的字典代码
    // getNode(tree, dicName) {
    //   for (let i = 0; i < tree.length; i++) {
    //     if (tree[i].dicName === dicName) {
    //       return tree[i]
    //     } else {
    //       if (tree[i].childMenus) {
    //         return this.getNode(tree[i].childMenus, dicName)
    //       }
    //     }
    //   }
    // },
    // 处理vue-treeSelect回显出现unknown问题
    getAutoNameUnknown(name) {
      if (name.lastIndexOf('unknown') > -1) {
        // 当treeselect翻译不了值时，name中有id，截取id，去调接口或者字典查询出名字
        return name.split('(')[0]
      } else {
        return name
      }
    },
    getNode(list, dicName) {
      let data;
      (list || []).map(item => {
        if (item.dicName === dicName) {
          data = [item]
        } else {
          const child = this.getNode(item.childMenus, dicName)
          if (child) {
            data = child
          }
        }
      })
      return data
    },
    // 自动生成
    handleAuto() {
      let string = ''
      const getAutoFiledVal = []
      this.autoMatic.forEach(async val => {
        if (!this.addOrUpdateForm[val.fieldName]) {
          string += ''
        } else {
          const fieldInfo = this.formPreviewData.find(element => element.fieldName === val.fieldName)
          if (fieldInfo.isInputClass === 'select' || fieldInfo.isInputClass === 'popover') {
            await FetchFindAllSubsetById({ id: fieldInfo.dictionaryConfigId.id }).then(res => {
              const option = this.getNode(res, this.addOrUpdateForm[val.fieldName])
              if (option) {
                const obj = {}
                obj.name = val.fieldName
                obj.val = option[0].dicCode + val.connector
                obj.sequence = val.sequence
                // string += '' + option[0].dicCode + val.connector
                getAutoFiledVal.push(obj)
              }
            })
          } else {
            const obj = {}
            obj.name = val.fieldName
            obj.val = this.addOrUpdateForm[val.fieldName] + val.connector
            obj.sequence = val.sequence
            // string += '' + this.addOrUpdateForm[val.fieldName] + val.connector
            getAutoFiledVal.push(obj)
          }
        }
        // 按照指定顺序排再拼接
        getAutoFiledVal.sort(this.compare('sequence'))
        string = getAutoFiledVal.map((item) => item.val).join('')

        this.formPreviewData.map(item => {
          if (item.isAutomatic) {
            this.$set(this.addOrUpdateForm, item.fieldName, string)
          }
        })
      })
    },
    // 排序
    compare(property) {
      return function(a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    // 获取档号组成项
    FetchNoFormatField(categoryId) {
      getNoFormatField({ categoryId: categoryId }).then(res => {
        this.autoMatic = res
        // this.handleAuto()
      })
    },
    // 获取对应字典子集数据
    getAllSubset(item) {
      if (item.dictionaryConfigId) {
        FetchFindAllSubsetById({ id: item.dictionaryConfigId.id }).then(res => {
          if (item.isInputClass === 'select') {
            this.$set(item, 'options', res)
          } else if (item.isInputClass === 'popover') {
            this.popoverTableData = res
          }
        })
      }
    },
    // 判断重复api
    handlerIsRepeat(params, item) {
      if (this.isDesFormType !== 'prearchiveLibrary') {
        FetchDoeditIsRepeat(params).then(res => {
          if (res) {
            this.$message.error(item.fieldCnName + '不可重复')
          }
        })
      } else {
        FetchReDoeditIsRepeat(params).then(res => {
          if (res) {
            this.$message.error(item.fieldCnName + '不可重复')
          }
        })
      }
    },
    // input 判断是否重复
    isRepeatHandle(item) {
      // 自动重复字段 - 是否重复
      if (item.isRepeat) {
        let params
        if (this.isDesFormType !== 'prearchiveLibrary') {
          params = {
            'categoryId': this.selectedCategory.id,
            'archivesId': this.arcId,
            'fieldName': item.fieldName,
            'value': this.addOrUpdateForm[item.fieldName]
          }
        } else {
          params = {
            'documentId': this.selectedCategory.id,
            'archivesId': null,
            'fieldName': item.fieldName,
            'value': this.addOrUpdateForm[item.fieldName]
          }
        }
        this.handlerIsRepeat(params, item)
      }

      if (this.isDesFormType !== 'prearchiveLibrary') {
        if (!item.isAutomatic) {
          const index = this.autoMatic.findIndex(i => item.fieldName === i.fieldName)
          if (index !== -1) {
            this.handleAuto()
          }
        }
      }
    },
    // tree - open
    openTree(item) {
      this.treeCurrentFiled = item
      this.$set(item, 'options', [])
      this.getAllSubset(this.treeCurrentFiled)
    },
    // tree - select
    selectTree(val) {
      this.addOrUpdateForm[this.treeCurrentFiled.fieldName] = val.dicName
      // this.treeName = val.dicName
      // 自动重复字段 - 是否重复 - treeSelect方式
      if (this.treeCurrentFiled.isRepeat) {
        let params
        if (this.isDesFormType !== 'prearchiveLibrary') {
          params = {
            'categoryId': this.selectedCategory.id,
            'archivesId': this.arcId,
            'fieldName': this.treeCurrentFiled.fieldName,
            'value': val.dicName
          }
        } else {
          params = {
            'documentId': this.selectedCategory.id,
            'archivesId': null,
            'fieldName': this.treeCurrentFiled.fieldName,
            'value': val.dicName
          }
        }
        this.handlerIsRepeat(params, this.treeCurrentFiled)
      }
      const index = this.autoMatic.findIndex(i => this.treeCurrentFiled.fieldName === i.fieldName)
      if (index !== -1) {
        this.handleAuto()
      }
    },
    // popover - table 单选
    clickRowHandler(row) {
      this.$refs.popoverTable.clearSelection()
      this.$refs.popoverTable.toggleRowSelection(row)
    },
    // popover - table 选中得项
    handleSelectionChange(val) {
      if (val.length > 0) {
        this.addOrUpdateForm[this.currentFieldName] = val[0].dicName
      }
      this.$refs.popoverTable.clearSelection()
      this.popoverVisible = false

      const index = this.autoMatic.findIndex(i => this.currentFieldName === i.fieldName)
      if (index !== -1) {
        this.handleAuto()
      }
    },
    // popover - 当前选中得
    handleCurrentFieldName(item) {
      this.popoverVisible = true
      this.currentFieldName = item.fieldName
      this.getAllSubset(item)
    },
    // 预览和输入时，自动补零
    autoAddZero(isFilling, fieldName, value, fillingDigit) {
      if (isFilling) {
        this.addOrUpdateForm[fieldName] = value.toString().padStart(fillingDigit, '0').slice(-1 * fillingDigit)
      }
    },
    // 动态生成表单
    editFormRow() {
      this.rules = {}
      console.log(this.formPreviewData)
      this.formPreviewData.map(item => {
        if (item.isInputClass === 'select') {
          this.$set(item, 'options', [])
          this.$set(this.addOrUpdateForm, item.fieldName, null) // 防止unkonwn
        }
        if (item.isDefaultValue !== '') {
          this.$set(this.addOrUpdateForm, item.fieldName, item.isDefaultValue)
        } else {
          this.$set(this.addOrUpdateForm, item.fieldName, '')
          if (item.isInputClass === 'select') {
            this.$set(this.addOrUpdateForm, item.fieldName, null) // 防止unkonwn
          }
        }
        this.$set(this.rules, item.fieldName, [
          {
            required: !!item.isRequired,
            message: (item.isInputClass === 'text' ? '请输入' : '请选择') + item.fieldCnName,
            trigger: item.isInputClass === 'text' ? 'blur' : 'change'
          }
        ])
      })
    },
    // 预览界面排序
    datadragEnd(event) {
      // 调换顺序
      const oldIndex = event.oldIndex // 移动初始位置
      const newIndex = event.newIndex // 运动终止位置
      const diff = Math.abs(newIndex - oldIndex) // 插值绝对值
      const index = this.formPreviewData[oldIndex]
      if (oldIndex > newIndex) {
        for (let i = 0; i < diff; i++) {
          this.formPreviewData[oldIndex - i] = this.formPreviewData[oldIndex - i - 1]
        }
        this.formPreviewData[newIndex] = index
      } else {
        for (let i = 0; i < diff; i++) {
          this.formPreviewData[oldIndex + i] = this.formPreviewData[oldIndex + i + 1]
        }
        this.formPreviewData[newIndex] = index
      }
    },
    submitForm(formName, categoryId) {
      // 时间格式化
      this.formPreviewData.map(item => {
        if (item.isInputClass === 'date') {
          if (this.addOrUpdateForm[item.fieldName] !== '') {
            this.$set(this.addOrUpdateForm, item.fieldName, parseTime(this.addOrUpdateForm[item.fieldName]).split('00:00:00')[0])
          }
        }
      })
      if (this.selectedCategory.isType !== 4 || this.selectedCategory.isType !== 3) {
        this.setParentsId = this.parentsId
      } else {
        const parent_id = this.selectedCategory.pid
        if (parseInt(parent_id) === 0) {
          this.setParentsId = null
        } else {
          this.setParentsId = parent_id
        }
      }
      delete this.addOrUpdateForm.id
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 预归档库
          if (this.isDesFormType === 'prearchiveLibrary') {
            if (this.fileOriginal === null) {
              this.$message({
                message: '请上传电子文件',
                type: 'error'
              })
              return false
            }
            const params = {
              'id': this.arcId,
              'ids': null,
              'documentId': categoryId,
              'delMan': null,
              'jsonString': JSON.stringify(this.addOrUpdateForm),
              'fileJsonString': this.fileJsonString
            }
            prearchEdit(params).then(res => {
              if (res) {
                this.$message.success(res)
                this.$emit('close-dialog')
                this.crud.refresh()
              }
            })
          } else {
            const params = {
              'id': this.arcId,
              'categoryId': categoryId,
              'parentsId': this.setParentsId,
              'jsonString': JSON.stringify(this.addOrUpdateForm)
            }
            console.log(this.addOrUpdateForm)
            edit(params).then(res => {
              if (res) {
                this.$message.success(res)
                this.$emit('emitTableList')
                this.crud.refresh()
                localStorage.setItem('isForm', true)
                localStorage.removeItem('isDelt')
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose(done) {
      this.popoverVisible = false
      done()
    },
    // 选择附件
    async changeFile(e) {
      this.file = e.target.files[0]
      this.fileSize = this.file.size
      this.formatType = this.file.type.substring(0, this.file.type.indexOf('/'))
      this.fileNames = this.file.name
      this.postfix = this.file.name.substring(
        this.fileNames.lastIndexOf('.') + 1,
        this.fileNames.length
      )
      if (this.formatType === 'image') {
        const fileBase64 = await this.getBase64(this.file)
        const res = await this.getImgPx(fileBase64)
        this.px = res.width + 'px*' + res.height + 'px'
      } else {
        this.px = ''
      }
      this.uploadSave()
      // 上传附件
      // archivesUpload(this.baseApi + '/api/archives/uploadFile', this.file, this.categoryId).then(res => {
      //   if (res.data.code === 200) {
      //     this.filePath = res.data.data
      //     this.uploadSave()
      //   }
      // })
    },
    // 上传附件 - 选择上传即保存
    uploadSave() {
      this.nowDate = getCurrentTime()
      const json = {
        'file_name': this.fileNames,
        'file_size': this.fileSize,
        'file_type': this.postfix,
        'file_path': this.filePath,
        'sequence': null,
        'archive_id': this.arcId,
        'file_dpi': this.px,
        'file_thumbnail': '',
        'create_time': this.nowDate,
        'id': null
      }
      const arrayUpload = []
      arrayUpload.push(json)
      console.log(arrayUpload)
      this.fileOriginal = this.fileNames
      this.fileJsonString = JSON.stringify(arrayUpload)
      console.log(this.fileJsonString)
    },
    // 将上传的图片转为base64
    getBase64(file) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      return new Promise((resolve) => {
        reader.onload = () => {
          resolve(reader.result)
        }
      })
    },
    // 获取图片的分辨率
    getImgPx(img) {
      const image = new Image()
      image.src = img
      return new Promise((resolve) => {
        image.onload = () => {
          const width = image.width
          const height = image.height
          resolve({ width, height })
        }
      })
    }
  }
}

</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";

@mixin preview-border-style{
  [data-theme="dark"] & {
    border: 1px solid #3a99fd;
  }
  [data-theme="light"] & {
    border: 1px solid #EDEFF3;
  }
}

@mixin preview-border-color{
  [data-theme="dark"] & {
    border-color: #3a99fd;
  }
  [data-theme="light"] & {
    border-color: #EDEFF3;
  }
}

.preview-content {
  padding: 20px 0 0 0 !important;
  margin-top: 0 !important;
  border-radius: 4px;
  margin: 0 auto;
  border: 1px solid;
  @include preview-border-color;
  .el-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .el-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  ::v-deep .el-form-item__label{
    @include tree_font_color;
  }
  ::v-deep .el-input__inner,
  ::v-deep .vue-treeselect__control,
  ::v-deep .el-textarea__inner {
    width: 100%;
    background-color: transparent;
    @include input_style;
  }
  ::v-deep .el-input__prefix {
    text-align: right;
    right: 5px !important;
    @include tree_font_color;
  }
  .input-popover {
    ::v-deep .el-input__suffix {
      @include tree_font_color;
    }
  }
  ::v-deep .el-date-editor {
    width: 225px;
    .el-input__inner {
      padding-left: 15px;
    }
  }
  ::v-deep .el-form-item--small .el-form-item__content {
    line-height: 30px;
  }
}
.preview-form-bottom{
  padding: 20px 20px 0 20px;
  border-top: 1px solid;
  @include preview-border-color;
}

.prearch-upload{
  margin-right: 0 !important;
  ::v-deep .el-form-item__content{
    width: 540px !important;
    display: flex;
    justify-content: space-between;
    .upload-btn{
      position: relative;
      width:96px;
      margin-right: 0 !important;
      margin-left: 10px;
      overflow: initial !important;
      #upFile{
        position: absolute;
        left: 0;
        top: 0;
        // opacity: 0;
        width: 84px;
        height: 34px;
      }
      .el-button{
        margin-top: -2px;
      }
    }
  }
}

</style>