sstt-archives-web/src/views/record/components/addRecord.vue

<template>
  <div>
    <xy-dialog ref="dialog" :width="60" :is-show.sync="isShow" :type="'form'" :title="'档案信息'" :form="form"
      :rules='rules' @submit="submit">
      <template v-slot:title>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>标题：
          </div>
          <div class="xy-table-item-content">
            <el-input placeholder="请输入标题" style="width:100%" v-model="form.title"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:date>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>发布日期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker v-model="form.date" style="width:100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:catalog_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>所属目录：
          </div>
          <div class="xy-table-item-content" style="height:150px;overflow: scroll;">
            <el-tree v-if="isShow" :default-checked-keys="checkArr" :check-strictly="true" @check="getSelectedNodes"
              :data="catalogList" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current
              :props="defaultProps">
            </el-tree>
          </div>
        </div>
      </template>
      <template v-slot:files>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>附件：
          </div>
          <div class="xy-table-item-content">
            <el-upload :action="action" class='upload-demo' multiple :file-list="filesList" ref="pictureUpload"
              :auto-upload="true" :data="uploadOther" :on-success="handlesuccess"
              :on-remove="handleRemove">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>内容：
          </div>
          <div class="xy-table-item-content">
            <my-tinymce v-if="showTinymce" @input="saveContent" :value="form.content"></my-tinymce>
          </div>
        </div>
      </template>
    </xy-dialog>

  </div>
</template>

<script>
  import {
    save,
    show,
    index
  } from "@/api/system/baseForm.js"
  import {
    deepCopy,
    isNull
  } from "@/utils";
  import {
    getToken
  } from '@/utils/auth'
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        id: '',
        showTinymce: false,
        catalogList: [],
        checkArr: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        table_name: 'records',
        uploadOther: {
          token: ""
        },
        action: `${process.env.VUE_APP_UPLOAD_API}`,
        filesList: [],
        form: {
          title: '',
          date: '',
          catalog_id: '',
          catalog_name: '',
          files: [],
          content: '',
        },
        rules: {
          title: [{
            required: true,
            message: '请输入标题'
          }],
          // catalog_id: [{
          //   required: true,
          //   message: '请选择所属目录'
          // }],
        }
      }
    },
    created() {
      this.uploadOther.token = getToken();
      this.getCatalogList()
    },
    methods: {
      async getCatalogList() {
        const res = await index({
          page_size: 999,
          page: 1,
          sort_type: 'ASC',
          sort_name: 'sort',
          table_name: 'catalogs',
        })
        if (res.data.length > 0) {
          this.catalogList = this.base.buildTree(res.data)
        }
      },
      getSelectedNodes(data, node) {
        console.log("data", data)
        this.$refs.tree.setCheckedKeys([]); // 删除所有选中节点
        this.$refs.tree.setCheckedNodes([data]); // 选中已选中节点
        this.form.catalog_name = data.name
        this.form.catalog_id = data.id
        this.$forceUpdate()
      },
      handleRemove(file, fileList) {
        this.filesList = fileList
      },
      handlesuccess(response, file, fileList) {
        this.filesList = fileList
      },
      saveContent(e) {
        this.form.content = e
      },


      submit() {

        if (this.id) {
          this.form.id = this.id
        } else {
          this.form.id = ''
        }

        if(this.base.isNull(this.form.catalog_id)){
          this.$Message.warning("请选择所属目录")
          return
        }

        let _files = []
        if (this.filesList.length > 0) {
          for (var h of this.filesList) {
            if (h.response) {
              _files.push(h.response.id)
            } else {
              _files.push(h.id)
            }
          }
          this.form.files = _files
        } else {
          this.form.files = []
        }

        console.log("this.form", this.form)
        // return
        save({
          table_name: this.table_name,
          ...this.form
        }).then(res => {
          this.$message({
            type: 'success',
            message: '授权成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      },

      getDetail() {
        show({
          id: this.id,
          table_name: this.table_name,
        }).then(res => {
          this.form = this.base.requestToForm(res,this.form)
          this.checkArr = res.catalog_id ? [res.catalog_id] : []
          if(res.files_upload_details && res.files_upload_details.length>0){
            this.filesList = []
            res.files_upload_details.map(item=>{
              this.filesList.push({
                name:item.original_name,
                id:item.id,
                url:item.url
              })
            })
          }
          this.showTinymce = true
          console.log("this.form", this.form)
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          } else {
            this.showTinymce = true
          }

        } else {
          this.id = ''
          this.showTinymce = false
          this.checkArr = []
          this.filesList = []
          this.form = {
            title: '',
            date: '',
            catalog_id: '',
            catalog_name: '',
            files: [],
            content: '',
          }
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .title,
  ::v-deep .date,
  ::v-deep .catalog_id,
  ::v-deep .content,
  ::v-deep .files,
  {
  flex-basis: 100%;
  }

  ::v-deep .catalog_id .xy-table-item {
    align-items: flex-start;
  }

  ::v-deep .xy-table-item-content {
    width: calc(100% - 140px);
  }

  ::v-deep .el-checkbox__input .el-checkbox__inner {
    border-radius: 50%;
  }
</style>