zbcx_ckyc 1.0.0

package/src/plugins/app/znycpjxt/DocList/DocList.vue

@@ -0,0 +1,496 @@
+<style lang="scss" scoped>
+</style>
+
+<template>
+  <div class="cx-doclist" style="width: 100%; height: 100%;">
+    <Docitem v-for="doc in list"
+      :key="doc.id"
+      :doc="doc"
+      @doc-click="onDocClick"
+      @doc-view="onDocView"
+      @doc-download="onDocDownload"
+      @doc-edit="onDocEdit"
+      @doc-remove="onDocRemove"
+    />
+    <el-upload class="cx-uploader" style="width:fill-available"
+      v-if="showUpload"
+      drag
+      v-bind="uploadAttrs"
+      :action="url"
+      :multiple="multiple"
+      :show-file-list="false"
+      :before-upload="beforeUpload"
+      :on-success="onUpload"
+    >
+      <template v-slot:default>
+      <em>
+        <cx-icon :size="size" icon="cx-fi ic-upload upload-add" />
+      </em>
+      <div class="el-upload__text">
+        {{$loc('cx.uploader.dragOr')}}
+        <em>{{$loc('cx.uploader.clickToUpload')}}</em>
+      </div>
+    </template>
+      <template v-if="tip" v-slot:tip>
+        <div class="el-upload__tip">{{tip}}</div>
+      </template>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+/** 组件 - 附件列表（基于 HTTP）
+ *
+ * 调用说明:
+ * @prop    {Boolean}   [viewable = true]       是否可以浏览
+ * @prop    {Boolean}   [downloadable = true]   是否可以下载
+ * @prop    {Boolean}   [editable = false]      是否可以编辑
+ * @prop    {Boolean}   [removable = false]     是否可以删除
+ * @prop    {Boolean}   [uploadable = true]     是否可以上载
+ * @prop    {String}    [workflow = '']         流程环节
+ * @prop    {String}    [bustype = '']          文件的业务类型，对应cx_media表的bustype字段
+ * @prop    {String}    [saveto = FileSys]      文件存储（取值: FileSys - 文件系统, Doc - 存media表及后端确定存放方式（file / fastdfs / miniio））
+ * @prop    {String}    [dir]                   存储的相对路径（当 saveto = FileSys 时生效，如果不设置，系统自动分配路径）（当 saveto = FileSys时，路径前面可以带文件系统根目录，不带则指向临时文件夹,如: data: tttt/, data: , :tttt/, : ,都是合法的）
+ * @prop    {Function}  [set-data]              设置参数 - function(data, file)
+ * @prop    {Object}    [uploadAttrs]           自定义传入el-upload组件的原生参数对象
+ *
+ * @event   doc-click                           点击文件-function(doc)
+ * @event   doc-view                            浏览文件-function(doc)
+ * @event   doc-download                        下载文件-function(doc)
+ * @event   doc-edit                            编辑文件-function(doc)
+ * @event   doc-remove                          删除文件-function(doc)
+ * @event   doc-add                             增加文件-function(doc)
+ *
+ * @param   {Object}      dir
+ * @param   {String}      dir.name              目录名
+ * @param   {String}      dir.to                面包屑的 to
+ */
+
+/**
+ * 修改记录
+ * 22-06-20       张发勇          升级到 vue3/element-plus
+ * 23-08-14       高旭龙          新增uploadAttrs参数，用以传入el-upload组件的原生参数对象;支持根据传入的limit参数，动态控制文件多选状态和上传按钮显隐
+ * 23-08-15       张发勇          增加 event doc-add
+ * 23-09-02       张发勇          修改图标
+ * 23-09-09       张发勇          当临时文件保存之后，需要清除 isNew状态，否则有二次存的风险，增加函数 clearNew
+ * 23-11-16       高旭龙          新增bustype参数，支持对查询的附件根据bustype过滤，对应cx_media表的bustype字段
+ */
+
+import Docitem from './unit/DocItem'
+
+export default
+{
+  components: { Docitem },
+  props:
+  {
+    viewable: { type: Boolean, default: true },
+    downloadable: { type: Boolean, default: true },
+    editable: { type: Boolean, default: false },
+    removable: { type: Boolean, default: false },
+    uploadable: { type: Boolean, default: true },
+    workflow: { type: String, default: '' },
+    bustype: { type: String, default: '' },
+    saveto: { type: String, default: cx.consts.SAVETO_FILESYS },
+    dir: { type: String, default: '' },
+    setData: { type: Function, default: null },
+    uploadAttrs: Object,
+    tip: { type: String, default: '' }
+  },
+
+  data()
+  {
+    return {
+      url: '',                              // 上载的URL
+      task: '',                             // 流程环节
+      tempFile: false,                      // 是否临时文件
+      list: []                              // 文件列表
+    }
+  },
+
+  emits: ['doc-click', 'doc-edit', 'doc-remove', 'doc-add'],
+
+  computed:
+  {
+    // 限制上传文件的总数量
+    fileLimit()
+    {
+      return (this.uploadAttrs && this.uploadAttrs.limit) || 9999
+    },
+
+    // 根据传入的uploadAttrs参数对象中multiple和limit的值来确定是否支持多选
+    multiple()
+    {
+      return this.uploadAttrs && this.uploadAttrs.multiple && this.fileLimit !== 1
+    },
+
+    // 是否显示上传按钮
+    showUpload()
+    {
+      return this.uploadable && this.list.length < this.fileLimit
+    }
+  },
+
+  created()
+  {
+    // 增加属性
+    this.majDoc = cx.consts.SYSTAB
+    this.minDoc = cx.consts.TAB_MEDIA
+    this.major = 0
+    this.minor = 0
+    this.entityid = 0
+    this.task = this.workflow
+
+    // 临时文件
+    // eslint-disable-next-line
+    if (this.saveto == cx.consts.SAVETO_FILESYS && !this.dir)
+      this.tempFile = true
+  },
+
+  methods:
+  {
+    // 设置上载的URL
+    urlUpload(file)
+    {
+      const self = this
+      const params =
+      {
+        major: self.major,
+        minor: self.minor,
+        entityid: self.entityid,
+        saveto: self.saveto,
+        dir: self.dir ? self.dir : '',
+        memo: ''
+      }
+      if (self.task)
+        params.task = self.task
+      if (self.setData)
+        self.setData(params, file)
+      self.url = cx.svr.upload.url(params)
+    },
+
+    /**
+     * 初始化对象
+     * @method
+     * @param   {Object}		options			              参数
+     * @param   {Number}		options.major		          实体主类型
+     * @param   {Number}		options.minor		          实体子类型
+     * @param   {Number}		options.entityid	        实体id，为0时文件上传在临时目录
+     * @param   {String}		[options.task]		        流程结点
+     * @param   {String}	  [options.bustype]	        流程中的业务类型
+     */
+    init(options)
+    {
+      const self = this
+      self.major = options.major
+      self.minor = options.minor
+      self.entityid = options.entityid
+      self.task = cx.base.defVal(options.task, self.task)
+      const bustype = cx.base.defVal(options.bustype, this.bustype)
+
+      // 取数据
+      if (options.entityid > 0)
+      {
+        // 构造条件查询表达式
+        const args = [['major', '=', options.major], ['minor', '=', options.minor, 'and'], ['entityid', '=', options.entityid, 'and']]
+
+        if (options.task)
+          args.push(['task', '=', options.task, 'and'])
+        if (bustype)
+          args.push(['bustype', '=', bustype, 'and'])
+
+        cx.svr.data.query(self.majDoc, self.minDoc, { args })
+          .then(ret =>
+          {
+            self.setFiles(ret)
+          })
+          .catch(self.onError)
+      }
+    },
+
+    /**
+     * 设置流程环节
+     * @method
+     * @param   {String}    task                  流程环节
+     */
+    setTask(task)
+    {
+      this.task = task
+    },
+
+    /**
+     * 设置已有文件列表
+     * @method
+     * @param   {Array}     files                 文件列表
+     */
+    setFiles(files)
+    {
+      // 排序
+      cx.util.sortNum(files, 'id')
+
+      // 把文件加进去
+      for (let i = 0; i < files.length; i++)
+      {
+        files[i].isNew = false
+        files[i].tempFile = false
+        files[i].viewable = this.viewable
+        files[i].downloadable = this.downloadable
+        files[i].editable = this.editable
+        files[i].removable = (!this.task || files[i].task === this.task)
+        this.add(files[i])
+      }
+    },
+
+    /**
+     * 增加一个文件
+     * @method
+     * @param   {Object}    doc                         文件信息
+     * @param   {Number}    doc.id                      文件ID
+     * @param   {String}    doc.title                   文件标题
+     * @param   {String}    doc.filename                文件名
+     * @param   {String}    [doc.task]                  流程环节
+     * @param   {Boolean}   [doc.isNew = false]         是否新文件
+     * @param   {Boolean}   [doc.tempFile = false]      是否临时文件
+     * @param   {Boolean}   [doc.viewable = false]      是否可预览
+     * @param   {Boolean}   [doc.downloadable = false]  是否可下载
+     * @param   {Boolean}   [doc.editable = false]      是否可编辑
+     * @param   {Boolean}   [doc.removable = false]     是否可删除
+     */
+    add(doc)
+    {
+      doc.isNew = !!doc.isNew
+      doc.tempFile = !!doc.tempFile
+      doc.viewable = this.viewable && !!doc.viewable
+      doc.downloadable = this.downloadable && !!doc.downloadable
+      doc.editable = this.editable && !!doc.editable
+      doc.removable = this.removable && !!doc.removable
+
+      this.list.push(doc)
+    },
+
+    /**
+     * 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
+     * @method
+     * @param {file}  file  文件对象
+     */
+    beforeUpload(file)
+    {
+      this.urlUpload(file)
+    },
+
+    /**
+     * 回调函数-上载成功
+     * @method
+     * @param   {Object}    response              http返回对象
+     * @param   {Object}    file                  文件信息
+     * @param   {Array}     fileList              文件列表
+     */
+    onUpload(response, file, fileList)
+    {
+      const self = this
+      const ret = response
+      if (ret.ret !== 0)
+      {
+        this.$showRet(ret)
+        return
+      }
+      if (ret.ret === 0)
+      {
+        const data = ret.data[0]
+        const doc =
+        {
+          filename: data.filename,
+          isNew: 1,
+          // eslint-disable-next-line
+          tempFile: self.saveto == cx.consts.SAVETO_FILESYS,
+          editable: self.editable,
+          downloadable: self.downloadable,
+          removable: 1,
+          viewable: self.viewable,
+          task: self.task,
+          bustype: this.bustype
+        }
+        let doc1
+
+        // 临时文件
+        if (self.tempFile)
+        {
+          doc1 =
+          {
+            id: cx.base.nextId(),
+            title: file.name,
+            filelength: file.size
+          }
+        }
+        else
+        {
+          doc1 =
+          {
+            id: data.id,
+            title: data.title,
+            filelength: data.filelength
+          }
+        }
+
+        cx.base.extend(doc, doc1)
+        self.list.push(doc)
+        this.$emit('doc-add', doc)
+      }
+    },
+
+    /**
+     * 消息响应函数-点击
+     * @method
+     * @param   {Object}    doc                   文件信息
+     */
+    onDocClick(doc)
+    {
+      this.$emit('doc-click', doc)
+    },
+
+    /**
+     * 消息响应函数-浏览
+     * @method
+     * @param   {Object}    doc                   文件信息
+     */
+    onDocView(doc)
+    {
+      const filetype = cx.file.getFileType(doc.filename)
+      const src = doc.tempFile ? cx.svr.file.urlStream({ filename: doc.filename }) : cx.svr.doc.urlStream({ id: doc.id })
+      cx.run.runPlug('FileView', { data: { src, filetype } })
+    },
+
+    /**
+     * 消息响应函数-下载
+     * @method
+     * @param   {Object}    doc                   文件信息
+     */
+    onDocDownload(doc)
+    {
+      if (doc.tempFile)
+        cx.svr.file.download({ filename: doc.filename, saveas: doc.title })
+      else
+        cx.svr.doc.download({ id: doc.id, saveas: doc.title })
+    },
+
+    /**
+     * 消息响应函数-编辑
+     * @method
+     * @param   {Object}    doc                   文件信息
+     */
+    onDocEdit(doc)
+    {
+      if (doc.tempFile)
+        return
+
+      const self = this
+      const fldMemo = $g.field.getFld2(self.majDoc, self.minDoc, 'memo')
+      const items =
+      [
+        {
+          isnum: 0,
+          colname: 'memo',
+          title: fldMemo ? fldMemo._label : 'memo',
+          value: doc.memo,
+          minlen: '1',
+          nullable: 0
+        }
+      ]
+
+      const onOk = values =>
+      {
+        const self = this
+        const params =
+        {
+          id: doc.id,
+          memo: values.memo
+        }
+        return cx.svr.data.update(self.majDoc, self.minDoc, params, 'memo')
+          .then(ret =>
+          {
+            doc.memo = params.memo
+            self.$emit('doc-edit', doc)
+
+            self.$showSuccess('edit')
+
+            return true
+          })
+          .catch(self.onError)
+      }
+
+      cx.run.runPlug('Input1', { items, onOk })
+    },
+
+    /**
+     * 消息响应函数-删除
+     * @method
+     * @param   {Object}    doc                   文件信息
+     */
+    onDocRemove(doc)
+    {
+      const self = this
+      self.$cfm('del')
+        .then(() =>
+        {
+          const aftDel = () =>
+          {
+            cx.array.removeElement(self.list, doc)
+            self.$emit('doc-remove', doc)
+          }
+
+          // 归档文件，真的删除；临时文件，不需要处理，后台自动删除
+          if (!doc.tempFile)
+          {
+            // eslint-disable-next-line
+            if (self.saveto == cx.consts.SAVETO_FILESYS)
+            {
+              cx.svr.file.delFile({ filename: doc.filename })
+                .then(aftDel)
+                .catch(self.onError)
+            }
+            else
+            {
+              cx.svr.doc.del({ id: doc.id })
+                .then(aftDel)
+                .catch(self.onError)
+            }
+          }
+          else
+            aftDel()
+        })
+        .catch(() =>
+        {
+        })
+    },
+
+    /**
+     * 取所有新文件列表
+     * @method
+     * @returns {Array}
+     */
+    getFilesNew()
+    {
+      const ret = []
+
+      for (let doc of this.list)
+      {
+        if (doc.isNew)
+          ret.push(doc)
+      }
+      return ret
+    },
+
+    /**
+     * 清除文件的 isNew 状态
+     * @method
+     */
+    clearNew()
+    {
+      for (let doc of this.list)
+      {
+        if (doc.isNew)
+          doc.isNew = false
+      }
+    }
+  }
+}
+</script>

package/src/plugins/app/znycpjxt/DocList/unit/DocItem.vue

@@ -0,0 +1,137 @@
+<style lang="scss" scoped>
+</style>
+
+<template>
+  <div class="doc-item" ref="item"
+    @click="onClick"
+  >
+    <div class="doc-title"
+      :class="{over: mouseover}"
+    >
+      {{titleTask}}
+      <br>
+      {{doc.title}}
+    </div>
+    <div class="doc-cmdbar" ref="cmdbar"
+      :class="{hide: !mouseover}"
+    >
+      <div v-if="doc.viewable" class="doc-cmd"><cx-icon icon="cx-fi ic-checkCircle" :size="size" @click="onView"/></div>
+      <div v-if="doc.downloadable" class="doc-cmd"><cx-icon icon="cx-fi ic-download" :size="size" @click="onDownload"/></div>
+      <div v-if="doc.editable && !doc.tempFile" class="doc-cmd"><cx-icon icon="cx-fi ic-edit" :size="size" @click="onEdit"/></div>
+      <div v-if="doc.removable" class="doc-cmd"><cx-icon icon="cx-fi ic-deleteCircle" :size="size" @click="onRemove"/></div>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * 组件 - 附件项
+ *
+ * 调用说明:
+ * @prop  {Object}      doc                         文件信息
+ *
+ * @event doc-click       点击文档 - function(doc)
+ * @event doc-view        预览文档 - function(doc)
+ * @event doc-download    下载文档 - function(doc)
+ * @event doc-edit        编辑文档 - function(doc)
+ * @event doc-remove      删除文档 - function(doc)
+ *
+ * 参数说明:
+ * @param   {Object}    doc                         文件信息
+ * @param   {String}    doc.title                   标题
+ * @param   {String}    [doc.task]                  流程环节
+ * @param   {Boolean}   [doc.viewable = false]      是否可以浏览
+ * @param   {Boolean}   [doc.downloadable = false]  是否可以浏览
+ * @param   {Boolean}   [doc.editable = false]      是否可以编辑
+ * @param   {Boolean}   [doc.removable = false]     是否可以删除
+ */
+
+/**
+ * 修改记录
+ * 22-06-20       张发勇          升级到 vue3/element-plus
+ */
+
+export default
+{
+  mixins: [cx.mixin.IComBase],
+  props:
+  {
+    doc: { Type: Object, required: true }
+  },
+
+  data()
+  {
+    return {
+      mouseover: false
+    }
+  },
+
+  emits: ['doc-click', 'doc-view', 'doc-download', 'doc-edit', 'doc-remove'],
+
+  computed:
+  {
+    titleTask()
+    {
+      let ret = ''
+
+      if (this.doc.task)
+        ret = this.doc.task
+      if (!ret && this.doc.memo)
+        ret = this.doc.memo
+
+      return ret ? '【' + ret + '】' : ''
+    }
+  },
+
+  mounted()
+  {
+    const item = this.$refs.item
+    const cmdbar = this.$refs.cmdbar
+
+    if (item && cmdbar)
+    {
+      item.onmouseenter = () =>
+      {
+        this.mouseover = true
+      }
+      item.onmouseleave = () =>
+      {
+        this.mouseover = false
+      }
+    }
+  },
+
+  methods:
+  {
+    // 点击
+    onClick()
+    {
+      this.$emit('doc-click', this.doc)
+    },
+
+    // 浏览
+    onView()
+    {
+      this.$emit('doc-view', this.doc)
+    },
+
+    // 下载
+    onDownload()
+    {
+      this.$emit('doc-download', this.doc)
+    },
+
+    // 编辑
+    onEdit()
+    {
+      this.$emit('doc-edit', this.doc)
+    },
+
+    // 删除
+    onRemove()
+    {
+      this.$emit('doc-remove', this.doc)
+    }
+  }
+}
+</script>