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

<template>
  <div>
    <xy-dialog ref="dialog" :width="60" :is-show.sync="isShow" :type="'form'" :title="$route.meta.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:status>
        <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-select style="width:100%" v-model="form.status" placeholder="请选择">
              <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </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:end_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.end_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:area_ids>
        <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-select :disabled="stateObj.auth_type==1" style="width:100%" v-model="form.area_ids" multiple
              placeholder="请选择">
              <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:tag_ids>
        <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-select style="width:100%" v-model="form.tag_ids" multiple placeholder="请选择">
              <el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:catalog_id v-if="false">
        <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">
            <wangEditor :isShow="isShow" v-show="showTinymce" :value="form.content" @change="changeEditor"></wangEditor>
            <!-- <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 wangEditor from '@/components/wangEditor';
  import {
    deepCopy,
    isNull
  } from "@/utils";
  import {
    getToken
  } from '@/utils/auth'
  import state from '@/store/modules/user.js'
  export default {
    components: {
      wangEditor
    },
    data() {
      return {
        stateObj: {},
        isShow: false,
        id: '',
        showTinymce: false,
        catalogList: [],
        statusList: [{
          id: 0,
          name: '正常'
        },  {
          id: 3,
          name: '已结束'
        },{
          id: 1,
          name: '已到期'
        }, {
          id: 2,
          name: '已延续'
        }],
        checkArr: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        table_name: 'records',
        uploadOther: {
          token: ""
        },
        action: `${process.env.VUE_APP_UPLOAD_API}`,
        filesList: [],
        tagList: [],
        areaList: [],
        form: {
          title: '',
          status: 0,
          date: '',
          end_date: '',
          area_ids: [],
          tag_ids: [],
          catalog_id: '',
          catalog_name: '',
          files: [],
          content: '',
          link_id: ''
        },
        rules: {
          title: [{
            required: true,
            message: '请输入标题'
          }],
          area_ids: [{
            required: true,
            message: '请选择所属区域'
          }],
          date: [{
            required: true,
            message: '请输入开始日期'
          }],
          // end_date: [{
          //   required: true,
          //   message: '请输入标题'
          // }],
          // tag_ids: [{
          //   required: true,
          //   message: '请选择标签'
          // }],
        }
      }
    },
    created() {
      this.stateObj = state.state
      this.uploadOther.token = getToken();

    },
    methods: {
      changeEditor(e) {
        this.form.content = e
      },
     setList(cat,area,tag){
       this.catalogList = cat?cat:[]
       this.areaList = area?area:[]
       this.tagList = tag?tag:[]
     },
      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()
      },
      setCheck(e) {
        if (e) {
          this.checkArr = [e]
          this.form.catalog_id = e
        } else {
          this.checkArr = []
          this.form.catalog_id = ''
        }
      },
      setLinkId(e){
        if(e){
          this.getDetail(e)
          this.form.link_id = e
        }

      },
      handleRemove(file, fileList) {
        this.filesList = fileList
      },
      handlesuccess(response, file, fileList) {
        console.log("response", response)
        if (response && response.hasOwnProperty('errcode')) {
          this.$Message.warning(response.errmsg || '')
          this.filesList = []
          return
        }
        this.filesList = fileList
      },
      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.$emit('refreshLink',true,res.id)
          this.isShow = false
        })
      },

      getDetail(id) {
        show({
          id: id,
          table_name: this.table_name,
        }).then(res => {
          this.checkArr = res.catalog_id ? [res.catalog_id] : [],
          this.form.catalog_id = res.catalog_id?res.catalog_id:''
          this.form.area_ids = res.area_ids ? res.area_ids : []
          this.form.tag_ids = res.tag_ids ? res.tag_ids : []
          this.form.status = 0
          this.form.link_id = id
          this.showTinymce = true
          console.log("this.form", this.form)
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {

            this.form.area_ids = this.stateObj.area_id ? [this.stateObj.area_id] : []
            this.showTinymce = true


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

  }
</script>

<style scoped lang="scss">
  ::v-deep .title,
  ::v-deep .date,
  ::v-deep .status,
  ::v-deep .end_date,
  ::v-deep .catalog_id,
  ::v-deep .content,
  ::v-deep .files,
  ::v-deep .area_ids,
  ::v-deep .tag_ids {
    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>