vue2-client 1.2.32 → 1.2.35

package/.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     '@vue/standard'
   ],
   rules: {
+    'comma-dangle': 'off',
     'no-console': 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'generator-star-spacing': 'off',

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
+**##1.2.35 -2022-04-13 @江超**
+- 功能修改：
+- [工单提交] 页面不再需要登录，而是通过路径传参获取信息
+- 生成环境不再使用CDN加速
+
+**##1.2.34 -2022-04-11 @张振宇**
+- 功能修改：
+- 文件上传组件完善
+- [request.js] post请求可以自定义请求头参数了
+- [.eslint] 不限制json结尾的逗号了
+
+**##1.2.33 -2022-04-11 @朱子峰**
+- 功能修改：
+- [XFormTable]：临时表数据插入BUG修复，增加不需要数据初始化的判断
+
 **##1.2.32 -2022-04-07 @朱子峰**
 - 功能修改：
 - [XFormTable]：新增判断，如果表名以##开始，则在查询时为其创建临时表

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.2.32",
+  "version": "1.2.35",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/base-client/all.js

@@ -25,6 +25,7 @@ import CreateSimpleFormQuery from '@vue2-client/base-client/components/common/Cr
 import FormGroupQuery from '@vue2-client/base-client/components/common/FormGroupQuery'
 import FormGroupEdit from '@vue2-client/base-client/components/common/FormGroupEdit'
 import JSONToTree from '@vue2-client/base-client/components/common/JSONToTree'
+import Upload from '@vue2-client/base-client/components/common/Upload'
 
 // 插件
 import Plugins from '@vue2-client/base-client/plugins'
@@ -55,3 +56,4 @@ Vue.component('CreateSimpleFormQuery', CreateSimpleFormQuery)
 Vue.component('FormGroupQuery', FormGroupQuery)
 Vue.component('FormGroupEdit', FormGroupEdit)
 Vue.component('JSONToTree', JSONToTree)
+Vue.component('Upload', Upload)

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

@@ -213,7 +213,7 @@
               </a-col>
               <a-col :span="8">
                 <a-form-model-item
-                  v-show="!(item.formType === 'file' || item.formType === 'image')"
+                  v-if="!(item.formType === 'file' || item.formType === 'image')"
                   label="数据字段名"
                   prop="key">
                   <a-input v-model="item.key" placeholder="请输入数据字段名" ref="key">
@@ -237,9 +237,10 @@
               </a-col>
             </a-row>
             <template v-if="dataMode.queryForm || dataMode.addOrEditForm">
-              <a-row :gutter="16" v-if="item.formType === 'file' || item.formType === 'image'">
+              <a-row :gutter="24" v-if="item.formType === 'file' || item.formType === 'image'">
                 <a-col :span="8">
                   <a-form-model-item
+                    style="margin-bottom: 0"
                     label="允许上传文件数量"
                     prop="accept"
                     v-if="item.formType === 'file' || item.formType === 'image'">
@@ -254,23 +255,21 @@
                 </a-col>
                 <a-col :span="8">
                   <a-form-model-item
-                    label="文件上传模式"
-                    prop="resUploadMode"
+                    label="上传至仓库"
+                    prop="resUploadStock"
                     v-if="item.formType === 'file' || item.formType === 'image'">
-                    <a-select v-model="item.resUploadMode" placeholder="文件上传模式，默认为服务器" @change="changeFormType(item)">
-                      <a-select-option key="server">服务器</a-select-option>
-                      <a-select-option key="oss">腾讯云对象存储</a-select-option>
-                      <a-select-option key="base64" :disabled="item.formType === 'file'">Base64</a-select-option>
-                      <a-popover slot="suffixIcon" title="关于资源上传模式" placement="right">
-                        <template slot="content">
-                          <p>指定文件上传到服务器，对象存储还是以base64方式存储</p>
-                          <br/>
-                          <p><span style="font-weight: bold">服务器：</span>文件上传到服务器，数据库需存储文件于服务器的路径</p>
-                          <p><span style="font-weight: bold">对象存储：</span>文件上传到云对象存储，数据库需存储文件于对象存储的路径</p>
-                          <p><span style="font-weight: bold">base64：</span>文件以base64字符串方式存入数据库中（仅图片上传表单支持）</p>
-                        </template>
-                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)"/>
-                      </a-popover>
+                    <a-select v-model="item.resUploadStock" placeholder="选择文件上传到的仓库" @change="changeStock">
+                      <a-select-option v-for="stock in stockList" :key="stock.id">{{ stock.f_name }}</a-select-option>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item
+                    label="仓库扩展路径"
+                    prop="pathKey"
+                    v-if="(item.formType === 'file' || item.formType === 'image') && (lowerPath.length > 0 || item.pathKey)">
+                    <a-select v-model="item.pathKey" placeholder="仓库扩展路径">
+                      <a-select-option v-for="pathKey in lowerPath" :key="pathKey.label">{{ pathKey.label }}</a-select-option>
                     </a-select>
                   </a-form-model-item>
                 </a-col>
@@ -731,9 +730,12 @@ export default {
         accept: '',
         addOrEdit: '',
         selectKeyName: '',
+        resUploadStock: '',
         acceptCount: '',
         dataModeArray: []
       },
+      stockList: [],
+      lowerPath: [],
       itemMap: {},
       selectIndex: null,
       selectType: undefined,
@@ -1014,7 +1016,13 @@ export default {
       if (this.itemMap[key]) {
         this.type = '修改'
         this.item = Object.assign({ formType: 'input', type: 'string' }, this.itemMap[key])
-        if (this.item.formType === 'selects') {
+        if (this.item.formType === 'file' || this.item.formType === 'image') {
+            this.getStocks()
+          if (this.item.resUploadStock) {
+            this.lowerPath = this.stockList.filter(item => item.id == this.item.resUploadStock)[0]?.f_lower_path_json ?? []
+          }
+        }
+       if (this.item.formType === 'selects') {
           // 因为 groupIndex 可能有很多值 单选框不行  赋给一个新的变量
           this.item.groupIndexView = this.item.groupIndex === 1 ? 1 : 'None'
         }
@@ -1281,17 +1289,36 @@ export default {
         this.dataModeArrayData = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
       }, 100)
     },
+    // 获取所有仓库
+    getStocks () {
+      if (this.stockList.length === 0) {
+        post('/webmeterapi/getFilesStock', {}).then(res => {
+          this.stockList = res.sort((a, b) => b.progress - a.progress)
+        }).catch(e => {})
+      }
+    },
     changeFormType (item) {
       if (item.formType === 'file' || item.formType === 'image') {
         this.item.accept = item.formType === 'file' ? ['*'] : ['.jpg,.jpeg,.ico,.gif,svg,.webp,.png,.bmp,.pjpeg,']
         this.item.resUploadMode = 'server'
+        this.item.key = 'FilesId'
         this.dataModeArrayData = ['addOrEditForm']
+        this.getStocks()
       } else {
         this.dataModeArrayData = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
         delete this.item.accept
         delete this.item.resUploadMode
       }
     },
+    // 修改上传到哪个仓库
+    changeStock (stock) {
+      if (stock) {
+        const stockValue = this.stockList.filter(item => item.id === stock)[0]
+        this.lowerPath = stockValue.f_lower_path_json ?? []
+        this.item.resUploadMode = stockValue.f_stock_type
+        this.item.stockAlias = stockValue.f_alias
+      }
+    },
     changeSelectKey (item) {
       if (item.selectType === 'key' && item.selectKey) {
         item.slot.type = 'badge'

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

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <a-upload-dragger
+      v-if="model.type === 'file'"
+      name="file"
+      :multiple="true"
+      :remove="deleteFileItem"
+      :customRequest="uploadFiles"
+      :file-list="uploadedFileList">
+      <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'"
+      list-type="picture-card"
+      :customRequest="uploadFiles"
+      :remove="deleteFileItem"
+      :file-list="uploadedFileList">
+      <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 {}
+      }
+    }
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' })
+  },
+  methods: {
+    uploadFiles (info) {
+      // 初始化文件信息
+      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)
+      if (this.model.pathKey) {
+        formData.append('pathKey', this.model.pathKey)
+      }
+      formData.append('stockAlias', this.model.stockAlias)
+      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.username)
+
+      let url = '/webmeteruploadapi/upload'
+      if (process.env.NODE_ENV === 'production') {
+        url = `/${this.model.stockAlias}/webmeteruploadapi/upload`
+      }
+      post(url, formData, { headers }).then(res => {
+        // 根据服务端返回的结果判断成功与否，设置文件条目的状态
+        if (res.success) {
+          fileInfo.status = 'done'
+          fileInfo.response = JSON.parse(res.data)
+          fileInfo.id = JSON.parse(res.data).id
+          fileInfo.url = JSON.parse(res.data).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) {
+      // 找到当前文件所在列表的索引
+      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/Upload/index.js

@@ -0,0 +1,3 @@
+import Upload from './Upload'
+
+export default Upload

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

@@ -5,6 +5,7 @@
     :width="1000"
     @cancel="onClose"
     okText="提交"
+    :destroyOnClose="true"
     :confirm-loading="loading"
     :zIndex="1001"
     @ok="onSubmit">

package/src/base-client/components/common/XAddNativeForm/index.js

@@ -1,3 +1,3 @@
-import XAddNativeForm from './XAddNativeForm'
-
-export default XAddNativeForm
+import XAddNativeForm from './XAddNativeForm'
+
+export default XAddNativeForm

package/src/base-client/components/common/XAddNativeForm/index.md

@@ -1,56 +1,56 @@
-# XAddNativeForm
-
-动态新增/修改表单控件，根据JSON配置生成一个完整的可供新增/修改数据的动态表单
-
-
-## 何时使用
-
-当需要一个可供新增/修改数据的动态生成的表单时
-
-
-引用方式：
-
-```javascript
-import XAddNativeForm from '@vue2-client/base-client/components/XAddNativeForm/XAddNativeForm'
-
-export default {
-    components: {
-      XAddNativeForm
-    }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<x-add-form
-  :business-type="businessType"
-  :json-data="formItems"
-  :modify-model-data="modifyModelData"
-  :loading="loading"
-  @onSubmit="onSubmit">
-</x-add-form>
-```
-
-## API
-
-| 参数              | 说明                       | 类型      | 默认值   |
-|-----------------|--------------------------|---------|-------|
-| businessType    | 业务类型                     | String  | ''    |
-| jsonData        | JSON配置，根据[工具>查询配置生成]功能生成 | Object  | {}    |
-| modifyModelData | 修改操作前查询出的业务数据            | Object  | {}    |
-| loading         | 新增或修改业务是否执行中             | Boolean | false |
-| fixedAddForm    | 固定新增表单，会和新增表单合并          | Object  | {}    |
-| @onSubmit       | 表单的提交事件                  | event   | -     |
-
-## 例子1
-----
-参考XFormTable组件
-```
-
-注意事项
-----
-
-> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
+# XAddNativeForm
+
+动态新增/修改表单控件，根据JSON配置生成一个完整的可供新增/修改数据的动态表单
+
+
+## 何时使用
+
+当需要一个可供新增/修改数据的动态生成的表单时
+
+
+引用方式：
+
+```javascript
+import XAddNativeForm from '@vue2-client/base-client/components/XAddNativeForm/XAddNativeForm'
+
+export default {
+    components: {
+      XAddNativeForm
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-add-form
+  :business-type="businessType"
+  :json-data="formItems"
+  :modify-model-data="modifyModelData"
+  :loading="loading"
+  @onSubmit="onSubmit">
+</x-add-form>
+```
+
+## API
+
+| 参数              | 说明                       | 类型      | 默认值   |
+|-----------------|--------------------------|---------|-------|
+| businessType    | 业务类型                     | String  | ''    |
+| jsonData        | JSON配置，根据[工具>查询配置生成]功能生成 | Object  | {}    |
+| modifyModelData | 修改操作前查询出的业务数据            | Object  | {}    |
+| loading         | 新增或修改业务是否执行中             | Boolean | false |
+| fixedAddForm    | 固定新增表单，会和新增表单合并          | Object  | {}    |
+| @onSubmit       | 表单的提交事件                  | event   | -     |
+
+## 例子1
+----
+参考XFormTable组件
+```
+
+注意事项
+----
+
+> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果

package/src/base-client/components/common/XForm/XFormItem.vue

@@ -168,40 +168,9 @@
     :sm="24"
     :md="24"
     :lg="24"
-    v-else-if="attr.type === 'file'">
+    v-else-if="attr.type === 'file' || attr.type === 'image'">
     <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
-      <a-upload-dragger
-        name="file"
-        :multiple="true"
-        :action="'/webmeteruploadapi/upload/'+attr.resUploadMode">
-        <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-form-model-item>
-  </x-form-col>
-  <!-- TODO 图片上传 -->
-  <x-form-col
-    :xl="24"
-    :xxl="24"
-    :xs="24"
-    :sm="24"
-    :md="24"
-    :lg="24"
-    v-else-if="attr.type === 'image'">
-    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
-      <a-upload list-type="picture-card" :file-list="[]">
-        <a-icon type="plus"/>
-        <div class="ant-upload-text">
-          Upload
-        </div>
-      </a-upload>
+      <upload :model="attr" @setFiles="setFiles"></upload>
     </a-form-model-item>
   </x-form-col>
 </template>
@@ -265,6 +234,10 @@ export default {
     }
   },
   methods: {
+    // 文件框时设置上传组件的值
+    setFiles (fileIds) {
+      this.form[this.attr.model] = fileIds
+    },
     // 懒加载检索方法
     fetchFunction (value) {
       this.lastFetchId += 1