yxk-electronic-archives/src/views/system/archivesCategory/descriptionPreview/index.vue

<template>
  <div class="category-main">
    <div class="des-preview-left small-preview-left">
      <div class="des-title">
        <p>字段调整 输入字段</p>
      </div>
      <ul class="des-fields">
        <li v-for="(item,index) in allFieldsData" v-show="item.isInput" :key="index" :class="[ fieldsActive == index ?'fields-active':'']" @click="selectField(index)">
          <el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top">
            <p>{{ item.fieldCnName }}</p>
          </el-tooltip>
        </li>
      </ul>
      <div class="des-title">
        <p @click="isCollaspeHiddenFields = !isCollaspeHiddenFields">非输入字段 <i :class="['el-icon-arrow-down', isCollaspeHiddenFields ?'el-icon-arrow-down':'arrow-up']" /></p>
      </div>
      <!-- 收起展开 -->
      <el-collapse-transition>
        <ul v-show="!isCollaspeHiddenFields" class="des-fields">
          <li v-for="(item,index) in allFieldsData" v-show="!item.isInput" :key="index" :class="[ fieldsActive == index ?'fields-active':'']" @click="selectField(index)">
            <el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top">
              <p>{{ item.fieldCnName }}</p>
            </el-tooltip>
          </li>
        </ul>
      </el-collapse-transition>
      <div class="des-set-btn">
        <el-button type="primary" icon="iconfont icon-bianji" @click="settingForm">编辑</el-button>
        <el-button class="des-set-sort" type="primary" icon="iconfont icon-paixu" @click="previewFormVisible = true">排序</el-button>
      </div>
      <SettingForm :is-disabled="true" :is-add="false" :this-fields="thisFields" />
    </div>
    <div class="des-preview-right">
      <div class="des-title">
        <p>界面预览效果</p>
      </div>
      <PreviewForm ref="previewForm1" :is-has-code="true" :is-disabled="false" :form-preview-data.sync="isInputFields" :selected-category="selectedCategory" :is-des-form-type="isDesFormType" />
    </div>

    <!-- 修改字段 -->
    <el-dialog class="edit-form-dialog" :visible="settingFormVisible" :before-close="handleClose" :close-on-click-modal="false" :modal-append-to-body="false" title="修改字段">
      <div class="setting-dialog">
        <SettingForm ref="editForm" :is-disabled="false" :is-add="false" :this-fields="editField" />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="editSubmit">保存</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 界面字段预览排序 -->
    <el-dialog class="preview-dialog sort-dialog" :visible="previewFormVisible" :before-close="handleClose" :close-on-click-modal="false" :modal-append-to-body="false" :destroy-on-close="true" title="著录界面排序">
      <div class="setting-dialog">
        <i class="drag-tip">提示：使用鼠标拖动调整顺序</i>
        <!-- <PreviewForm :is-disabled="true" :all-fields-data="allFieldsData" .sync/> -->
        <PreviewForm ref="previewForm" :is-has-code="true" :is-disabled="false" :is-draggable="true" :form-preview-data="JSON.parse(JSON.stringify(isInputFields))" :is-des-form-type="isDesFormType" :selected-category="selectedCategory" />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.native="handleSort">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PreviewForm from '@/views/components/category/PreviewForm'
import SettingForm from '@/views/components/category/SettingForm'
import { FetchArchivesTypeManage } from '@/api/category/category'
import { edit } from '@/api/category/fieldManage'
import { previewFormOrder } from '@/api/category/listBrowsing'
export default {
  name: 'DescriptionPreview',
  components: { PreviewForm, SettingForm },
  props: {
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      allFieldsData: [],
      isCollaspeHiddenFields: true, // 隐藏字段收起展开
      settingFormVisible: false, // 修改编辑字段 - dialog
      previewFormVisible: false, // 界面预览form - dialog
      fieldsActive: 0, // 当前字段index
      thisFields: { dictionaryConfigId: { dicName: null, id: null }}, // 当前项字段内容
      editField: {},
      isInputFields: [],
      loading: false,
      isDesFormType: 'category'
    }
  },
  watch: {
    selectedCategory: function(newValue, oldValue) {
      this.getArchivesType()
    }
  },
  mounted() {
    this.getArchivesType()
  },
  methods: {
    getArchivesType(setField) {
      // 门类切换时，表单校验清除
      this.$refs.previewForm1.$refs['addOrUpdateForm'].clearValidate()
      FetchArchivesTypeManage({ categoryId: this.selectedCategory.id, isType: 2 }).then(res => {
        this.allFieldsData.splice(0, this.allFieldsData.length)
        this.isInputFields.splice(0, this.isInputFields.length)
        if (!setField) {
          setField = false
        }
        res.sort(this.compare).forEach((item, index) => {
          // 防止对应字典是null时报错
          item.dictionaryConfigId = item.dictionaryConfigId || { dicName: null, id: null }
          this.allFieldsData.push(item)
          if (item.isInput && !setField) {
            this.fieldsActive = index
            this.thisFields = item
            setField = true
          }
          if (item.isInput) {
            this.isInputFields.push(item)
          }
        })
      })
    },
    handleClose(done) {
      this.settingFormVisible = false
      this.previewFormVisible = false
      // this.editResetForm()
      done()
    },
    compare(a, b) {
      return a.isSequence - b.isSequence
    },
    settingForm() {
      this.editField = JSON.parse(JSON.stringify(this.thisFields))
      this.settingFormVisible = true
    },
    // 当前选中的字段
    selectField(index) {
      this.hiddenFieldsActive = -1
      this.fieldsActive = index
      this.thisFields = this.allFieldsData[this.fieldsActive]
    },
    // 修改字段"保存"提交
    editSubmit() {
      this.$refs['editForm'].$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.loading = true
        edit(this.editField).then(() => {
          this.loading = false
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 2500
          })
          this.settingFormVisible = false
          // 清空数组数据
          this.allFieldsData.splice(0, this.allFieldsData.length)
          this.getArchivesType(true)
          this.thisFields = this.editField
        })
      })
      return false
    },
    handleSort() {
      const sortParam = this.$refs.previewForm.formPreviewData.map((item, index) => {
        return {
          isSequence: index + 1,
          id: item.id
        }
      })
      previewFormOrder(sortParam).then(() => {
        this.previewFormVisible = false
        this.getArchivesType()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.category-main {
  .des-preview-left{

  }
}
</style>