修改添加组件

jero-web/src/components/Standardselection/index.vue

@@ -0,0 +1,281 @@
+<template>
+  <div>
+    <div class="box-title-text">
+      <!--      <div class="title-text">-->
+      <!--        <span class="Required">*</span>-->
+      <!--        <span :class="{'title-text-text':false}">{{query.enName}}</span><br>-->
+      <!--        <span :class="{'title-text-text':false}">{{query.name}}</span>-->
+      <!--      </div>-->
+      <a-input class="box-input" :value="value" @input="indexclick($event)" :placeholder="query.placeholder"/>
+      <a-button type="primary" class="button-box" @click="standardClick">
+        标准选择
+      </a-button>
+    </div>
+    <a-drawer
+      :title="'标准选择'"
+      :maskClosable="true"
+      :width="1000"
+      placement="right"
+      :closable="true"
+      @close="handleCancel"
+      :visible="visible"
+      style="height: 100%;overflow: auto;padding-bottom: 53px;">
+      <a-form layout="inline" @keyup.enter.native="searchQuery" style="margin-bottom: 20px">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8" v-for="(item,index) in searchList" :key="index" style="line-height: 48px">
+            <div class="box-title-text-index">
+              <div class="title-text-index">
+                <span>{{item.enName}}</span><br>
+                <span>{{item.name}}</span>
+              </div>
+              <a-input class="box-input-index" :placeholder="item.placeholder"
+                       v-model="queryParam[item.attrModel]"></a-input>
+            </div>
+          </a-col>
+          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                  <a-button class="box-button" type="primary" @click="searchReset">{{$t('query')}}</a-button>
+                  <a-button class="box-button" style="margin-left: 8px" @click="searchQuery">{{$t('reset')}}</a-button>
+      </span>
+        </a-row>
+      </a-form>
+      <a-table
+        :columns="columns"
+        :data-source="data"
+        :scroll="{ y: 540 }"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        bordered>
+        <template slot="name" slot-scope="text">
+          <a>{{ text }}</a>
+        </template>
+      </a-table>
+      <div class="drawer-bootom-button">
+        <a-button @click="handleCancel" type="danger" style="margin-right: 16px">{{$t('cancel')}}</a-button>
+        <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'index',
+    props: ['query', 'value'],
+    data() {
+      return {
+        visible: false,
+        confirmLoading: false,
+        selectedRowKeys: [],
+        content: [],
+        queryParam: {},
+        searchList: [
+          { name: '标准编号', placeholder: '请输入标准编号', attrModel: 'name', enName: 'standard' },
+          { name: '标准名称', placeholder: '请输入标准名称', attrModel: 'title', enName: 'standName' }
+        ],
+        columns: [
+          {
+            title: 'Name',
+            dataIndex: 'name',
+            scopedSlots: { customRender: 'name' }
+          },
+          {
+            title: 'Cash Assets',
+            className: 'column-money',
+            dataIndex: 'money'
+          },
+          {
+            title: 'Address',
+            dataIndex: 'address'
+          }
+        ],
+        data: [
+          {
+            key: '1',
+            name: 'John Brown',
+            money: '￥300,000.00',
+            address: 'New York No. 1 Lake Park'
+          },
+          {
+            key: '2',
+            name: 'Jim Green',
+            money: '￥1,256,000.00',
+            address: 'London No. 1 Lake Park'
+          },
+          {
+            key: '3',
+            name: 'Joe Black',
+            money: '￥120,000.00',
+            address: 'Sidney No. 1 Lake Park'
+          },
+          {
+            key: '4',
+            name: 'John Brown',
+            money: '￥300,000.00',
+            address: 'New York No. 1 Lake Park'
+          },
+          {
+            key: '5',
+            name: 'Jim Green',
+            money: '￥1,256,000.00',
+            address: 'London No. 1 Lake Park'
+          },
+          {
+            key: '6',
+            name: 'Joe Black',
+            money: '￥120,000.00',
+            address: 'Sidney No. 1 Lake Park'
+          },
+          {
+            key: '7',
+            name: 'John Brown',
+            money: '￥300,000.00',
+            address: 'New York No. 1 Lake Park'
+          },
+          {
+            key: '8',
+            name: 'Jim Green',
+            money: '￥1,256,000.00',
+            address: 'London No. 1 Lake Park'
+          },
+          {
+            key: '9',
+            name: 'Joe Black',
+            money: '￥120,000.00',
+            address: 'Sidney No. 1 Lake Park'
+          },
+          {
+            key: '10',
+            name: 'Jim Green',
+            money: '￥1,256,000.00',
+            address: 'London No. 1 Lake Park'
+          },
+          {
+            key: '11',
+            name: 'Joe Black',
+            money: '￥120,000.00',
+            address: 'Sidney No. 1 Lake Park'
+          }
+        ]
+      }
+    },
+    mounted() {
+
+    },
+    methods: {
+      standardClick() {
+        this.visible = true
+      },
+      handleCancel() {
+        this.visible = false
+      },
+      handleSubmit() {
+        let content = []
+        this.content.forEach(res=>{
+          content.push(res.name)
+        })
+        this.$emit('input', content.join(','))
+        this.visible = false
+      },
+      indexclick(event) {
+        this.$emit('input', event.target.value)
+      },
+      onSelectChange(value) {
+        this.content = []
+        value.forEach(val => {
+          this.data.forEach((res) => {
+            if (res.key === val){
+              this.content.push(res)
+            }
+          })
+        })
+        this.selectedRowKeys = value
+      },
+      searchQuery() {
+
+      },
+      searchReset() {
+
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    /*align-items: center;*/
+  }
+
+  .title-text {
+    width: 114px;
+    text-align: right;
+    display: inline-block;
+    font-weight: bold;
+    font-size: 14px;
+    margin-right: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .box-input {
+    display: inline-block;
+    height: 38px;
+    width: 100%;
+  }
+
+  .itemModel {
+    width: calc(100% - 220px);
+    display: inline-block;
+    margin-top: 2px;
+  }
+
+  .Required {
+    color: red;
+    margin-right: 4px;
+  }
+
+  .button-box {
+    margin-left: 10px;
+    height: 38px;
+    line-height: 38px;
+
+  }
+
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
+
+  .box-title-text-index {
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+  }
+
+  .title-text-index {
+    display: inline-block;
+    font-weight: bold;
+    font-size: 14px;
+    margin-right: 16px;
+  }
+
+  .box-input-index {
+    display: inline-block;
+    width: 80%;
+    height: 38px;
+    margin-top: 2px;
+  }
+
+  .box-button {
+    height: 38px;
+    margin-top: 2px;
+  }
+</style>

jero-web/src/components/addForm/index.vue

@@ -39,7 +39,7 @@
                 <span :class="{'title-text-text':false}">{{item.name}}</span>
               </div>
               <a-form-model-item class="itemModel" :prop="item.attrModel">
-                <a-date-picker class="box-input" v-model="formInline[item.attrModel]" @change="onChange"
+                <a-date-picker class="box-input" v-model="formInline[item.attrModel]"
                                style="width: 100%"/>
               </a-form-model-item>
             </div>
@@ -53,7 +53,7 @@
                 <span :class="{'title-text-text':false}">{{item.name}}</span>
               </div>
               <a-form-model-item class="itemModel" :prop="item.attrModel">
-                <a-input-number class="box-input" v-model="formInline[item.attrModel]" :min="1" :max="99999999" @change="onChange" />
+                <a-input-number class="box-input" v-model="formInline[item.attrModel]" :min="1" :max="99999999"/>
               </a-form-model-item>
             </div>
           </a-col>
@@ -81,8 +81,8 @@
               </div>
               <a-form-model-item class="itemModel" :prop="item.attrModel">
                 <j-multi-select-tag class="box-input" v-model="formInline[item.attrModel]"
-                                   :placeholder="$t('selectStatus')" :type="'select'"
+                                    :placeholder="$t('selectStatus')" :type="'select'"
-                                   :triggerChange="false" dictCode="valid_status"/>
+                                    :triggerChange="false" dictCode="valid_status"/>
               </a-form-model-item>
             </div>
           </a-col>
@@ -108,20 +108,57 @@
                 <span :class="{'title-text-text':false}">{{item.name}}</span>
               </div>
               <a-form-model-item class="itemModel" :prop="item.attrModel">
-                <a-textarea :placeholder="$t('selectStatus')" v-model="formInline[item.attrModel]" :rows="4" />
+                <a-textarea :placeholder="$t('selectStatus')" v-model="formInline[item.attrModel]" :rows="4"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="24" v-else-if="item.type === 'FILE'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required">*</span>
+                <span :class="{'title-text-text':false}">{{item.enName}}</span><br>
+                <span :class="{'title-text-text':false}">{{item.name}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.attrModel">
+                <a-button type="primary" style="height: 38px;width: calc(50% - 80px);line-height: 38px"
+                          @click="clickButtonToUpload(item.attrModel)">
+                  {{ (formInline[item.attrModel] === 'null' || formInline[item.attrModel] === '' ||
+                  formInline[item.attrModel] == null) ? '上传文件' : '查看已上传文件'
+                  }}
+                </a-button>
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="24" v-else-if="item.type === 'STANDARD'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required">*</span>
+                <span :class="{'title-text-text':false}">{{item.enName}}</span><br>
+                <span :class="{'title-text-text':false}">{{item.name}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.attrModel">
+                <Standardselection :query="item" v-model="formInline[item.attrModel]"/>
               </a-form-model-item>
             </div>
           </a-col>
         </div>
 
       </a-row>
+      <uploadFile ref="uploadFile" @uploadSuccess="uploadSuccess"></uploadFile>
     </a-form-model>
   </a-spin>
 </template>
 
 <script>
+  import uploadFile from '@/components/uploadFile/file'
+  import Standardselection from '@/components/Standardselection/index'
+
   export default {
     name: 'index',
+    components: {
+      uploadFile,
+      Standardselection
+    },
     props: {
       url: {
         type: Object,
@@ -178,7 +215,7 @@
             enName: 'title',
             placeholder: '请输入标题',
             attrModel: 'checkbox',
-            validStatus:'valid_status',
+            validStatus: 'valid_status'
           },
           {
             id: 5,
@@ -187,7 +224,7 @@
             enName: 'title',
             placeholder: '请输入标题',
             attrModel: 'radio',
-            validStatus:'valid_status',
+            validStatus: 'valid_status'
           },
           {
             id: 6,
@@ -195,7 +232,7 @@
             name: '下拉多选',
             enName: 'title',
             placeholder: '请输入标题',
-            validStatus:'valid_status',
+            validStatus: 'valid_status',
             attrModel: 'selectAll'
           },
           {
@@ -213,10 +250,27 @@
             enName: 'title',
             placeholder: '请输入文本框',
             attrModel: 'number'
+          },
+          {
+            id: 9,
+            type: 'FILE',
+            name: '上传文件',
+            enName: 'UploadFile',
+            placeholder: '请输入文本框',
+            attrModel: 'file'
+          },
+          {
+            id: 10,
+            type: 'STANDARD',
+            name: '标准选择',
+            enName: 'standard',
+            placeholder: '请手动输入或者选择标准',
+            attrModel: 'standard'
           }
         ],
         validatorRules: {},
-        confirmLoading: false
+        confirmLoading: false,
+        uploadName: ''
       }
     },
     mounted() {
@@ -225,7 +279,6 @@
     },
     methods: {
       sumber() {
-        console.log(1)
         this.$refs.ruleForm.validate(valid => {
           if (valid) {
             alert('submit!')
@@ -234,7 +287,22 @@
             return false
           }
         })
-      }
+      },
+      clickButtonToUpload(current) {
+        this.$refs.uploadFile.visible = true
+        this.uploadName = current
+      },
+      /** 上传文件的回调 */
+      uploadSuccess(data) {
+        console.log(data)
+        let attIdList = []
+        data.map(item => {
+          attIdList.push(item.id || data.name)
+        })
+        /** 赋值给当前对应的表单文件 */
+        this.formInline[this.uploadName] = attIdList.join(',')
+        this.formInline = { ...this.formInline }
+      },
     }
   }
 </script>
@@ -268,10 +336,12 @@
     line-height: 38px;
     height: 38px;
   }
-  .box-input .ant-select-selection--multiple .ant-select-selection__rendered > ul > li{
+
-    margin-top:6px;
+  .box-input .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
+    margin-top: 6px;
   }
-  .box-input .ant-input-number-input-wrap{
+
+  .box-input .ant-input-number-input-wrap {
     line-height: 38px;
     height: 38px;
   }

jero-web/src/components/uploadFile/file.vue

@@ -0,0 +1,203 @@
+<template>
+<div>
+  <a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title">
+    <a-upload-dragger
+      accept='*.*'
+      :disabled="disabled"
+      class="ant-upload-list"
+      name="file"
+      :file-list="myfileList"
+      :multiple="true"
+      :action = 'uploadAction'
+      :headers="headers"
+      :before-upload="beforeUpload"
+      :remove='remove'
+      @change="handleChange">
+      <p><a-icon style="font-size: 67px;color: #c0c4cc;" type="cloud-upload" /></p>
+      <p class="ant-upload-text" style="font-size: 14px;line-height: 30px">点击上传</p>
+    </a-upload-dragger>
+  </a-modal>
+</div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import { ACCESS_TOKEN } from "@/store/mutation-types"
+  export default {
+    name: 'file',
+    props:['disableds','disabled','thisFileUploadUrl','readonly','thisFileType'],
+    data(){
+       return{
+         visible:false,
+         title:'上传文件',
+         uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
+         myuploadAction:window._CONFIG['domianURL']+this.thisFileUploadUrl,
+         upDataList:[],
+         downLoadFileUrl:window._CONFIG['domianURL']+'/sys/common/static',
+         fileList:[],
+         myfileList:[],
+         isLoding:false,
+       }
+    },
+    created(){
+      const token = Vue.ls.get(ACCESS_TOKEN);
+      this.headers = {"X-Access-Token":token};
+      this.containerId = 'container-ty-'+new Date().getTime();
+    },
+    mounted(){
+      // console.log(this.thisFileType,this.thisFileSize,this.thisFileUploadUrl);
+    },
+    methods:{
+      perentHandleFunc(data){
+        this.myfileList = data
+        this.fileList = data
+        if (data && data.length > 0){
+          this.myfileList.forEach((res)=>{
+            res.name = res.fileName
+            res.uid = res.id
+          })
+        }else {
+          this.myfileList = []
+          this.fileList = []
+        }
+      },
+      beforeUpload(file) {
+        console.log(file)
+        // let thisFileType = this.thisFileType.replace(/\s+/g, "");
+        this.fileTypeSatus = true;
+        //TODO 客户要求不拦截文件
+        // if(file.type){
+        //   if (thisFileType.indexOf(file.type) != -1) {
+        //     this.fileTypeSatus = true;
+        //   }else{
+        //     this.fileTypeSatus = false;
+        //   }
+        // }else{
+        //   if(file.name.slice(file.name.length - 3 , file.name.length)  == 'rar'){
+        //    this.fileTypeSatus = true
+        //   }else if(file.type == 'application/x-zip-compressed'){
+        //     this.fileTypeSatus = true
+        //   }else{
+        //     this.fileTypeSatus = false;
+        //   }
+        // }
+        this.$message.destroy()
+        // 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
+        this.errorMessage = file.name + "文件大小超出100MB限制, 请压缩或降低文件质量!";
+
+      },
+      remove(){
+        this.fileTypeSatus = true;
+      },
+      mydownload(item){
+        var fileName = item.fileName;
+        downFile(this.downLoadFileUrl+'/'+item.ext1,{}).then((data)=>{
+          if (!data) {
+            this.$message.destroy()
+            this.$message.warning("文件下载失败")
+            return
+          }
+          if (typeof window.navigator.msSaveBlob !== 'undefined') {
+            window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName)
+          }else{
+            let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
+            let link = document.createElement('a')
+            link.style.display = 'none'
+            link.href = url
+            link.setAttribute('download', fileName)
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link); //下载完成移除元素
+            window.URL.revokeObjectURL(url); //释放掉blob对象
+          }
+        })
+      },
+      mypreview(item){
+        console.log(item);
+        let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(this.downLoadFileUrl+'/'+item.ext1)
+        window.open(url, '_blank')
+      },
+      handleChange(info) {
+        let { file } = info;
+        const status = info.file.status;
+        info.fileList.forEach((val,index)=>{
+          if(val.response && !val.response.result){
+            this.$message.error(val.response.message);
+            info.fileList.splice(index,1)
+          }
+        })
+        if (this.fileTypeSatus) {
+          if (file.size > 100000000) {
+            this.$message.error(this.errorMessage)
+            return
+          }else {
+            if (status === 'error') {
+              this.$emit('uploadSuccess', this.fileList)
+              this.$message.destroy()
+              this.$message.error(`${info.file.name} 文件上传失败。`);
+            } else if (status === 'removed') {
+              this.myfileList = info.fileList;
+              this.fileList = []
+              this.myfileList.forEach((res) => {
+                if (res.response) {
+                  this.fileList.push(res.response.result)
+                } else {
+                  this.fileList.push(res)
+                }
+              })
+              this.$emit('uploadSuccess', this.fileList)
+              if(this.myfileList.length > 0){
+                this.$message.destroy()
+                this.$message.success(`${info.file.name} 删除成功。`);
+              }
+            } else if (status === 'done') {
+              this.fileList = []
+              this.myfileList = info.fileList;
+              if (info.fileList.length > 20) {
+                info.fileList.splice(20)
+                this.myfileList = info.fileList;
+                this.myfileList.forEach((res) => {
+                  if (res.response) {
+                    this.fileList.push(res.response.result)
+                  } else {
+                    this.fileList.push(res)
+                  }
+                })
+                this.$emit('uploadSuccess', this.fileList)
+                this.$message.destroy()
+                this.$message.error('最多只能上传二十个');
+                return
+              }
+              this.myfileList.forEach((res) => {
+                if (res.response) {
+                  this.fileList.push(res.response.result)
+                } else {
+                  this.fileList.push(res)
+                }
+              })
+              this.$emit('uploadSuccess', this.fileList)
+              if(this.myfileList.length > 0){
+                this.$message.destroy()
+                this.$message.success(`${info.file.name} 文件上传成功。`);
+              }
+            } else if (status === 'uploading') {
+              this.myfileList = info.fileList;
+              this.$emit('uploadSuccess')
+              // this.$message.success(`${info.file.name} 文件上传成功。`);
+            }
+          }
+        }else{
+          this.$message.warning('不支持上传该类型的文件!')
+        }
+      },
+      resetFileList(){
+        this.myfileList = [];
+        this.fileList = [];
+      },
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>