vue2-client 1.3.24 → 1.4.0

package/src/base-client/components/common/Upload/Upload.vue

@@ -1,167 +1,168 @@
-<template>
-  <div>
-    <a-upload-dragger
-      v-if="model.type === 'file'"
-      :accept="model.accept.join('')"
-      :customRequest="uploadFiles"
-      :file-list="uploadedFileList"
-      :multiple="true"
-      :remove="deleteFileItem"
-      name="file">
-      <p class="ant-upload-drag-icon">
-        <a-icon type="inbox"/>
-      </p>
-      <p class="ant-upload-text">
-        点击或拖动文件到该区域上传
-      </p>
-      <p class="ant-upload-hint">
-        支持单个或多个文件
-      </p>
-    </a-upload-dragger>
-    <a-upload
-      v-if=" model.type === 'image'"
-      :accept="model.accept.join('')"
-      :customRequest="uploadFiles"
-      :file-list="uploadedFileList"
-      :remove="deleteFileItem"
-      list-type="picture-card">
-      <a-icon type="plus"/>
-      <div class="ant-upload-text">
-        Upload
-      </div>
-    </a-upload>
-  </div>
-</template>
-
-<script>
-
-import { post } from '@vue2-client/services/api'
-import { mapState } from 'vuex'
-
-export default {
-  name: 'uploads',
-  data () {
-    return {
-      uploadedFileList: [],
-    }
-  },
-  props: {
-    // 表单属性
-    model: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    files: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    images: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    serviceName: {
-      type: String,
-      default: 'af-system'
-    }
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' })
-  },
-  created () {
-    const list = this.model.type === 'file' ? [...this.files] : [...this.images]
-    if (this.model.useType) {
-      this.uploadedFileList = list.filter(item => item.f_use_type === this.model.useType)
-    } else {
-      this.uploadedFileList = list
-    }
-    this.$emit('setFiles', this.uploadedFileList.filter(item => item.status === 'done').map(item => item.id))
-  },
-  methods: {
-    uploadFiles (info) {
-      if (this.uploadedFileList.length >= this.model.acceptCount) {
-        this.$message.error(`当前表单限制仅可上传 ${this.model.acceptCount} 个文件`)
-        return
-      }
-      // 初始化文件信息
-      const fileInfo = {
-        uid: info.file.uid,
-        name: info.file.name,
-        status: 'uploading',
-        response: '',
-        url: '',
-      }
-      // 放入上传列表中，以便于显示上传进度
-      this.uploadedFileList.push(fileInfo)
-      // 组装上传数据
-      const headers = {
-        'Content-Type': 'multipart/form-data',
-      }
-      const formData = new FormData()
-      formData.append('avatar', info.file)
-      formData.append('resUploadMode', this.model.resUploadMode ?? 'server')
-      if (this.model.pathKey) {
-        formData.append('pathKey', this.model.pathKey ?? 'Default')
-      }
-      // formData.append('stockAlias', this.model.stockAlias)
-      formData.append('formType', this.model.type)
-      formData.append('useType', this.model.useType ?? 'Default')
-      formData.append('resUploadStock', this.model.resUploadStock)
-      formData.append('filename', info.file.name)
-      formData.append('filesize', (info.file.size / 1024 / 1024).toFixed(4))
-      formData.append('f_operator', this.currUser ? this.currUser.username : '')
-
-      // const url = '/api/af-system/resource'
-      // if (process.env.NODE_ENV === 'production') {
-      //   url = `/${this.model.stockAlias}/af-system/resource`
-      // }
-      post('/api/' + this.serviceName + '/resource/upload', formData, { headers, timeout: 60 * 1000 }).then(res => {
-        // 根据服务端返回的结果判断成功与否，设置文件条目的状态
-        if (res.success) {
-          fileInfo.status = 'done'
-          let dataObj
-          if (typeof res.data === 'string') {
-            dataObj = JSON.parse(res.data)
-          } else {
-            dataObj = res.data
-          }
-          fileInfo.response = dataObj
-          fileInfo.id = dataObj.id
-          fileInfo.url = dataObj.f_downloadpath
-          this.$emit('setFiles', this.uploadedFileList.filter(item => item.status === 'done').map(item => item.id))
-          this.$message.success('上传成功！')
-        } else {
-          fileInfo.status = 'error'
-          fileInfo.response = res.data
-          this.$message.error('上传失败！')
-        }
-      }).catch((e) => {
-        fileInfo.status = 'error'
-        fileInfo.response = e
-        this.$message.error(`请求失败！${e}`)
-      })
-    },
-    // 删除文件
-    deleteFileItem (file) {
-      if (file.id) {
-        post('/api/' + this.serviceName + '/entity/t_files', { id: file.id, f_state: '删除' }).then(res => {
-        }).catch(e => { })
-      }
-      // 找到当前文件所在列表的索引
-      const index = this.uploadedFileList.indexOf(file)
-      // 从列表中移除该文件
-      this.uploadedFileList.splice(index, 1)
-      this.$emit('setFiles', this.uploadedFileList.filter(item => item.status === 'done').map(item => item.id))
-      return true
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-
-</style>
+<template>
+  <div>
+    <a-upload-dragger
+      v-if="model.type === 'file'"
+      :accept="model.accept.join('')"
+      :customRequest="uploadFiles"
+      :file-list="uploadedFileList"
+      :multiple="true"
+      :remove="deleteFileItem"
+      name="file">
+      <p class="ant-upload-drag-icon">
+        <a-icon type="inbox"/>
+      </p>
+      <p class="ant-upload-text">
+        点击或拖动文件到该区域上传
+      </p>
+      <p class="ant-upload-hint">
+        支持单个或多个文件
+      </p>
+    </a-upload-dragger>
+    <a-upload
+      v-if=" model.type === 'image'"
+      :accept="model.accept.join('')"
+      :customRequest="uploadFiles"
+      :file-list="uploadedFileList"
+      :remove="deleteFileItem"
+      list-type="picture-card">
+      <a-icon type="plus"/>
+      <div class="ant-upload-text">
+        Upload
+      </div>
+    </a-upload>
+  </div>
+</template>
+
+<script>
+
+import { post } from '@vue2-client/services/api'
+import { mapState } from 'vuex'
+import { upload } from '@/services/api/common'
+
+export default {
+  name: 'uploads',
+  data () {
+    return {
+      uploadedFileList: [],
+    }
+  },
+  props: {
+    // 表单属性
+    model: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    files: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    images: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    serviceName: {
+      type: String,
+      default: 'af-system'
+    }
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' })
+  },
+  created () {
+    const list = this.model.type === 'file' ? [...this.files] : [...this.images]
+    if (this.model.useType) {
+      this.uploadedFileList = list.filter(item => item.f_use_type === this.model.useType)
+    } else {
+      this.uploadedFileList = list
+    }
+    this.$emit('setFiles', this.uploadedFileList.filter(item => item.status === 'done').map(item => item.id))
+  },
+  methods: {
+    uploadFiles (info) {
+      if (this.uploadedFileList.length >= this.model.acceptCount) {
+        this.$message.error(`当前表单限制仅可上传 ${this.model.acceptCount} 个文件`)
+        return
+      }
+      // 初始化文件信息
+      const fileInfo = {
+        uid: info.file.uid,
+        name: info.file.name,
+        status: 'uploading',
+        response: '',
+        url: '',
+      }
+      // 放入上传列表中，以便于显示上传进度
+      this.uploadedFileList.push(fileInfo)
+      // 组装上传数据
+      const headers = {
+        'Content-Type': 'multipart/form-data',
+      }
+      const formData = new FormData()
+      formData.append('avatar', info.file)
+      formData.append('resUploadMode', this.model.resUploadMode ?? 'server')
+      if (this.model.pathKey) {
+        formData.append('pathKey', this.model.pathKey ?? 'Default')
+      }
+      // formData.append('stockAlias', this.model.stockAlias)
+      formData.append('formType', this.model.type)
+      formData.append('useType', this.model.useType ?? 'Default')
+      formData.append('resUploadStock', this.model.resUploadStock)
+      formData.append('filename', info.file.name)
+      formData.append('filesize', (info.file.size / 1024 / 1024).toFixed(4))
+      formData.append('f_operator', this.currUser ? this.currUser.username : '')
+
+      // const url = '/api/af-system/resource'
+      // if (process.env.NODE_ENV === 'production') {
+      //   url = `/${this.model.stockAlias}/af-system/resource`
+      // }
+      upload(formData, this.serviceName, { headers, timeout: 60 * 1000 }).then(res => {
+        // 根据服务端返回的结果判断成功与否，设置文件条目的状态
+        if (res.success) {
+          fileInfo.status = 'done'
+          let dataObj
+          if (typeof res.data === 'string') {
+            dataObj = JSON.parse(res.data)
+          } else {
+            dataObj = res.data
+          }
+          fileInfo.response = dataObj
+          fileInfo.id = dataObj.id
+          fileInfo.url = dataObj.f_downloadpath
+          this.$emit('setFiles', this.uploadedFileList.filter(item => item.status === 'done').map(item => item.id))
+          this.$message.success('上传成功！')
+        } else {
+          fileInfo.status = 'error'
+          fileInfo.response = res.data
+          this.$message.error('上传失败！')
+        }
+      }).catch((e) => {
+        fileInfo.status = 'error'
+        fileInfo.response = e
+        this.$message.error(`请求失败！${e}`)
+      })
+    },
+    // 删除文件
+    deleteFileItem (file) {
+      if (file.id) {
+        post('/api/' + this.serviceName + '/entity/t_files', { id: file.id, f_state: '删除' }).then(res => {
+        }).catch(e => { })
+      }
+      // 找到当前文件所在列表的索引
+      const index = this.uploadedFileList.indexOf(file)
+      // 从列表中移除该文件
+      this.uploadedFileList.splice(index, 1)
+      this.$emit('setFiles', this.uploadedFileList.filter(item => item.status === 'done').map(item => item.id))
+      return true
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+
+</style>

package/src/base-client/components/common/XFormTable/XFormTable.vue

@@ -49,31 +49,53 @@
             <a-button v-if="!buttonState || buttonState.delete" :disabled="!isDelete" type="danger" @click="deleteItem">
               <a-icon :style="iconStyle" type="delete"/>删除
             </a-button>
+            <a-button v-if="!buttonState || buttonState.import" type="dashed" @click="$refs.importExcel.importExcelHandleOpen()">
+              <a-icon :style="iconStyle" type="import" />导入
+            </a-button>
+            <a-dropdown v-if="!buttonState || buttonState.export">
+              <a-menu slot="overlay">
+                <a-menu-item :disabled="selectedRowKeys.length === 0" key="1" @click="handleExport(true)"><a-icon :style="iconStyle" type="ordered-list" />导出选中数据</a-menu-item>
+                <a-menu-item key="2" @click="handleExport"><a-icon :style="iconStyle" type="snippets" />导出本页数据</a-menu-item>
+                <a-menu-item key="3" @click="handleExportByQuery"><a-icon :style="iconStyle" type="download" />导出所有符合条件的数据</a-menu-item>
+              </a-menu>
+              <a-button>导出 <a-icon type="down" /> </a-button>
+            </a-dropdown>
             <slot :selectedRowKeys="selectedRowKeys" name="button"></slot>
           </a-space>
           <slot name="expand"></slot>
         </template>
       </x-table>
+      <!-- 上传文件 -->
+      <x-import-excel
+        ref="importExcel"
+        @ok="refreshTable"
+        :title="title"
+        :service-name="serviceName"
+        :query-params-name="queryParamsName"
+      />
     </template>
   </a-skeleton>
 </template>
 <script>
-import XForm from '@vue2-client/base-client/components/common/XForm/XForm'
-import XAddForm from '@vue2-client/base-client/components/common/XAddForm/XAddForm'
-import XTable from '@vue2-client/base-client/components/common/XTable/XTable'
-import { query, commonApi, addOrModify, remove, queryWithResource } from '@vue2-client/services/api/common'
+import XForm from '@vue2-client/base-client/components/common/XForm'
+import XAddForm from '@vue2-client/base-client/components/common/XAddForm'
+import XTable from '@vue2-client/base-client/components/common/XTable'
+import XImportExcel from '@vue2-client/base-client/components/common/XImportExcel'
+import { query, download, commonApi, addOrModify, remove, queryWithResource } from '@vue2-client/services/api/common'
 import { indexedDB } from '@vue2-client/utils/indexedDB'
 import { mapState } from 'vuex'
 import { Modal } from 'ant-design-vue'
 import { post } from '@vue2-client/services/api/restTools'
 import { CommonTempTable } from '@vue2-client/services/api/commonTempTable'
+import { exportJson } from '@/utils/excel/Export2Excel'
 
 export default {
   name: 'XFormTable',
   components: {
     XTable,
     XForm,
-    XAddForm
+    XAddForm,
+    XImportExcel
   },
   data () {
     return {
@@ -117,11 +139,7 @@ export default {
       // 被修改数据加载状态
       editDataLoading: false,
       // 是否为临时表
-      isTableTemp: false,
-      // 自定义新增修改接口
-      customAoM: undefined,
-      // 自定义查询接口
-      customQuery: undefined
+      isTableTemp: false
     }
   },
   computed: {
@@ -177,11 +195,6 @@ export default {
         return false
       }
     },
-    // 动态创建子表需要的定义
-    tempTableData: {
-      type: Object,
-      default: null
-    },
     // 数据只有一页时是否展示分页，true：展示，auto：隐藏
     showPagination: {
       type: Boolean,
@@ -227,18 +240,18 @@ export default {
       this.formItems = res.formJson
       this.buttonState = res.buttonState
       this.serviceName = res.serviceName
-      this.customAoM = res.customAoM
-      this.customQuery = res.customQuery
       this.mainLoading = false
       this.loaded = true
     },
     getColumnsJson () {
+      this.form = {}
       this.mainLoading = true
       indexedDB.getByWeb(this.queryParamsName, commonApi.getColumnsJson, { str: this.queryParamsName }, (ret) => {
         this.setParams(ret)
       })
     },
     getColumnsJsonBySource () {
+      this.form = {}
       this.mainLoading = true
       post(commonApi.getColumnsJson, { queryObject: this.queryParamsJson }).then(res => {
         this.queryParams = res
@@ -267,7 +280,7 @@ export default {
     // 新增/修改数据表单提交
     onAddOrModify (res) {
       if (this.viewMode) {
-        this.$message.info('预览模式禁止新增')
+        this.$message.info('预览模式禁止新增和修改')
         return false
       }
       // 如果是临时表
@@ -276,39 +289,35 @@ export default {
         return
       }
       if (res.valid) {
-        this.loading = true
-        const requestParameters = {
-          queryParamsName: this.queryParamsName,
-          form: {}
-        }
-        if (this.businessType === '修改') {
-          const rowKeyValue = this.selectedRowKeys[0]
-          const key = this.tableColumns[0].dataIndex
-          const realKey = key.substring(key.indexOf('_') + 1)
-          requestParameters.form[realKey] = rowKeyValue
-        }
-        for (const key of Object.keys(res.form)) {
-          const realKey = key.substring(key.indexOf('_') + 1)
-          requestParameters.form[realKey] = res.form[key]
-        }
-        if (!this.customAoM || this.customAoM?.length === 0) {
-          this.customAoM = undefined
-        }
-        addOrModify(requestParameters, this.customAoM, this.serviceName).then(res => {
-          this.$message.success(this.businessType + '成功！')
-          this.loading = false
-          this.modelVisible = false
-          this.$refs.xTable.refresh(true)
-          // commit
-          this.$emit('afterSubmit', { type: this.businessType, id: res.id, form: requestParameters.form })
-        }).catch(e => {
-          this.loading = false
-          this.modelVisible = false
-          this.$message.error(this.businessType + '失败！')
-        })
-      } else {
         return false
       }
+      this.loading = true
+      const requestParameters = {
+        queryParamsName: this.queryParamsName,
+        form: {}
+      }
+      if (this.businessType === '修改') {
+        // 将更新需要的主键值加入到表单中
+        const key = this.tableColumns[0].dataIndex
+        const realKey = this.getRealKey(key)
+        requestParameters.form[realKey] = this.selectedRowKeys[0]
+      }
+      for (const key of Object.keys(res.form)) {
+        const realKey = this.getRealKey(key)
+        requestParameters.form[realKey] = res.form[key]
+      }
+      addOrModify(requestParameters, this.serviceName).then(res => {
+        this.$message.success(this.businessType + '成功！')
+        this.loading = false
+        this.modelVisible = false
+        this.$refs.xTable.refresh(true)
+        // commit
+        this.$emit('afterSubmit', { type: this.businessType, id: res.id, form: requestParameters.form })
+      }).catch(e => {
+        this.loading = false
+        this.modelVisible = false
+        this.$message.error(this.businessType + '失败！')
+      })
     },
     // 刷新加载表格数据
     loadData (requestParameters, callback) {
@@ -320,7 +329,7 @@ export default {
         }
       }
       if (!this.isTableTemp) {
-        result = query(requestParameters, undefined, this.serviceName)
+        result = query(requestParameters, this.serviceName)
       }
       this.$emit('afterQuery', result)
       callback(result)
@@ -329,6 +338,10 @@ export default {
     action (record, id) {
       this.$emit('action', record, id)
     },
+    // 获取数据字段实际值
+    getRealKey (key) {
+      return key.substring(key.indexOf('_') + 1)
+    },
     // 新增业务
     addItem () {
       this.businessType = '新增'
@@ -338,32 +351,24 @@ export default {
     // 修改业务
     editItem () {
       this.businessType = '修改'
-      if (!this.viewMode) {
-        const requestParameters = {
-          queryParamsName: this.queryParamsName,
-          conditionParams: {},
-          pageNo: 1,
-          pageSize: 1
-        }
-        requestParameters.conditionParams[this.tableColumns[0].dataIndex] = this.selectedRowKeys[0]
-        requestParameters.f_businessid = this.selectedRowKeys[0]
-        if (this.isTableTemp) {
-          this.$emit('tempTableEdit', requestParameters)
-          return
-        }
-        this.editDataLoading = true
-        if (!this.customQuery || this.customQuery?.length === 0) {
-          this.customQuery = undefined
-        }
-        queryWithResource(requestParameters, this.customQuery, this.serviceName).then(res => {
-          this.modifyModelData = { data: res.data[0], images: res.images, files: res.files }
-          this.modelVisible = true
-          this.editDataLoading = false
-          console.warn(this.modifyModelData)
-        })
-      } else {
-        this.$message.info('预览模式禁止修改')
+      const requestParameters = {
+        queryParamsName: this.queryParamsName,
+        conditionParams: {},
+        pageNo: 1,
+        pageSize: 1
       }
+      requestParameters.conditionParams[this.tableColumns[0].dataIndex] = this.selectedRowKeys[0]
+      requestParameters.f_businessid = this.selectedRowKeys[0]
+      if (this.isTableTemp) {
+        this.$emit('tempTableEdit', requestParameters)
+        return
+      }
+      this.editDataLoading = true
+      queryWithResource(requestParameters, this.serviceName).then(res => {
+        this.modifyModelData = { data: res.data[0], images: res.images, files: res.files }
+        this.modelVisible = true
+        this.editDataLoading = false
+      })
     },
     // 删除业务
     deleteItem () {
@@ -382,7 +387,7 @@ export default {
             queryParamsName: this.queryParamsName,
             idList: this.selectedRowKeys
           }
-          remove(requestParameters, undefined, this.serviceName).then(res => {
+          remove(requestParameters, this.serviceName).then(res => {
             this.loading = false
             this.$message.success('删除成功！')
             this.$refs.xTable.clearRowKeys()
@@ -397,6 +402,38 @@ export default {
         onCancel () {}
       })
     },
+    // 导出选中或本页数据
+    handleExport (isSelected) {
+      const tHeader = this.tableColumns.filter(res => res.slotType !== 'action').map(res => res.title)
+      const filterVal = this.tableColumns.map(res => res.dataIndex)
+      let exportData
+      if (isSelected) {
+        exportData = this.$refs.xTable.selectedRows
+      } else {
+        exportData = this.$refs.xTable.dataSource
+      }
+      const data = this.formatJson(filterVal, exportData)
+      exportJson(tHeader, data, this.title + `数据_${new Date().toLocaleString()}`)
+    },
+    formatJson (filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    // 导出符合条件的数据
+    handleExportByQuery () {
+      const that = this
+      this.$confirm({
+        title: '是否确认导出?',
+        content: '此操作将导出当前条件下所有数据而非选中数据',
+        onOk () {
+          download({
+            queryParamsName: that.queryParamsName,
+            form: that.form,
+            type: 'exportData'
+          }, that.title + `数据_${new Date().toLocaleString()}.xlsx`, that.serviceName)
+        },
+        onCancel () {}
+      })
+    },
     // 查询表单部分显示/隐藏切换
     toggleIsFormShow () {
       this.isFormShow = !this.isFormShow