ocr上传文件

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

@@ -0,0 +1,496 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <a-form-model :model="formInline" v-if="isFormInline" class="formAdd" :rules="rules" ref="ruleForm1">
+      <a-row :gutter="24">
+        <div v-for="(item,index) in dataList" :key="index">
+          <a-col :span="24" v-if="item.field_show_type === 'text'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required" v-if="item.field_must_input == 0">*</span>
+                <!--                <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
+                <span class="title-text-text">{{item.db_field_txt}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.db_field_name">
+                <a-input class="box-input" v-model="formInline[item.db_field_name]"
+                         :disabled="disabled"
+                         :placeholder="item.placeholder"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+
+          <a-col :span="24" v-else-if="item.field_show_type === 'CHECKBOX'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required" v-if="item.field_must_input == 0">*</span>
+                <!--                <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
+                <span class="title-text-text">{{item.db_field_txt}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.db_field_name">
+                <j-multi-select-tag class="box-input" v-model="formInline[item.db_field_name]"
+                                    :disabled="disabled"
+                                    :placeholder="$t('selectStatus')" :type="'checkbox'"
+                                    :triggerChange="false" :dictCode="item.dict_field"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+
+          <a-col :span="24" v-else-if="item.field_show_type === 'date'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required" v-if="item.field_must_input == 0">*</span>
+                <!--                <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
+                <span class="title-text-text">{{item.db_field_txt}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.db_field_name">
+                <a-date-picker class="box-input" v-model="formInline[item.db_field_name]"
+                               @change="dateChange(item)"
+                               format="YYYY-MM-DD"
+                               :disabled="disabled"
+                               style="width: 100%"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+
+          <a-col :span="24" v-else-if="item.field_show_type === 'SMULTITIME'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required" v-if="item.field_must_input == 0">*</span>
+                <!--                <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
+                <span class="title-text-text">{{item.db_field_txt}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.db_field_name">
+                <a-range-picker v-model="formInline[item.db_field_name]"
+                                :disabled="disabled"
+                                @change="onChange(item.db_field_name)"></a-range-picker>
+              </a-form-model-item>
+            </div>
+          </a-col>
+
+          <a-col :span="24" v-else-if="item.field_show_type === 'NUMBER'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required" v-if="item.field_must_input == 0">*</span>
+                <!--                <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
+                <span class="title-text-text">{{item.db_field_txt}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.db_field_name">
+                <a-input-number class="box-input"
+                                :disabled="disabled"
+                                v-model="formInline[item.db_field_name]" :min="1" :max="99999999"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+
+          <a-col :span="24" v-else-if="item.field_show_type === 'list'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required" v-if="item.field_must_input == 0">*</span>
+                <!--                <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
+                <span class="title-text-text">{{item.db_field_txt}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.db_field_name">
+                <j-dict-select-tag class="box-input" v-model="formInline[item.db_field_name]"
+                                   :disabled="disabled"
+                                   :placeholder="$t('selectStatus')" :type="'select'"
+                                   :triggerChange="false" :dictCode="item.dict_field"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+
+          <a-col :span="24" v-else-if="item.field_show_type === 'list_multi'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required" v-if="item.field_must_input == 0">*</span>
+                <!--                <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
+                <span class="title-text-text">{{item.db_field_txt}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.db_field_name">
+                <j-multi-select-tag class="box-input" v-model="formInline[item.db_field_name]"
+                                    :disabled="disabled"
+                                    :placeholder="$t('selectStatus')" :type="'select'"
+                                    :triggerChange="false" :dictCode="item.dict_field"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+
+          <a-col :span="24" v-else-if="item.field_show_type === 'RADIO'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required" v-if="item.field_must_input == 0">*</span>
+                <!--                <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
+                <span class="title-text-text">{{item.db_field_txt}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.db_field_name">
+                <j-dict-select-tag v-model="formInline[item.db_field_name]" :placeholder="$t('selectStatus')"
+                                   :disabled="disabled"
+                                   :type="'radio'" :triggerChange="false" :dictCode="item.dict_field"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+
+          <a-col :span="24" v-else-if="item.field_show_type === 'TEXTAREA'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required" v-if="item.field_must_input == 0">*</span>
+                <!--                <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
+                <span class="title-text-text">{{item.db_field_txt}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.db_field_name">
+                <a-textarea :placeholder="$t('selectStatus')"
+                            :disabled="disabled"
+                            v-model="formInline[item.db_field_name]" :rows="4"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="24" v-else-if="item.field_show_type === 'treeSelect'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required" v-if="item.field_must_input == 0">*</span>
+                <!--                  <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
+                <span class="title-text-text">{{item.db_field_txt}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.db_field_name">
+                <a-tree-select
+                  v-model="formInline[item.db_field_name]"
+                  style="width: 100%"
+                  :maxTagCount="1"
+                  :tree-data="treeData"
+                  tree-checkable
+                  placeholder="Please select"
+                />
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="24" v-else-if="item.field_show_type === 'file'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required" v-if="item.field_must_input == 0">*</span>
+                <!--                <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
+                <span class="title-text-text">{{item.db_field_txt}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.db_field_name">
+                <a-button type="primary" class="button-text"
+                          @click="clickButtonToUpload(item.db_field_name)">
+                  {{ (formInline[item.db_field_name] === 'null' || formInline[item.db_field_name] === '' ||
+                  formInline[item.db_field_name] == null) ? '点击上传' : '查看已上传文件'
+                  }}
+                </a-button>
+              </a-form-model-item>
+            </div>
+          </a-col>
+
+          <a-col :span="24" v-else-if="item.field_show_type === 'STANDARD'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required" v-if="item.field_must_input == 0">*</span>
+                <!--                <span :class="{'title-text-text':false}">{{item.db_field_en_name}}</span><br>-->
+                <span class="title-text-text">{{item.db_field_txt}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.db_field_name">
+                <Standardselection :query="item"
+                                   :disabled="disabled"
+                                   v-model="formInline[item.db_field_name]"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+        </div>
+      </a-row>
+      <uploadFile ref="uploadFile" :accept="accept" :disabled="disabled" @uploadSuccess="uploadSuccess"></uploadFile>
+    </a-form-model>
+  </a-spin>
+</template>
+
+<script>
+  import uploadFile from '@/components/ocrUpload/index'
+  import Standardselection from '@/components/Standardselection/index'
+  import { getAction, postAction } from '@/api/manage'
+  import eventBUs from '../../common/event'
+  import moment from 'moment'
+
+  export default {
+    name: 'ocrAddForm',
+    components: {
+      uploadFile,
+      Standardselection
+    },
+    props: {
+      url: {
+        type: Object,
+        default: {}
+      },
+      flag: {
+        type: String,
+        default: ''
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      accept:{
+        type:String,
+      }
+    },
+    data() {
+      return {
+        formInline: {},
+        isFormInline: false,
+        rules: {},
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 6 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 17 }
+        },
+        dataList: [],
+        ruleList: [],
+        validatorRules: {},
+        confirmLoading: false,
+        uploadName: ''
+      }
+    },
+    mounted() {
+      this.getForm()
+    },
+    methods: {
+      sumber() {
+        this.$refs.ruleForm1.validate(valid => {
+          if (valid) {
+            let url = ''
+            if (this.formInline.id) {
+              url = this.url.updateInfo
+            } else {
+              url = this.url.addInfo
+            }
+            postAction(url, this.formInline).then((res) => {
+              if (res.success) {
+                this.$message.success(res.message)
+                eventBUs.$emit('searchReset')
+                this.$emit('addFormClick')
+              } else {
+                this.$message.warning(res.message)
+              }
+            })
+          } else {
+            return false
+          }
+        })
+      },
+      clickButtonToUpload(current) {
+        this.$refs.uploadFile.visible = true
+        this.uploadName = current
+      },
+      /** 上传文件的回调 */
+      uploadSuccess(data) {
+        console.log(data)
+        let attIdList = []
+        if(data && data.length>0){
+          data.map(item => {
+            attIdList.push(item.id || data.name)
+          })
+          /** 赋值给当前对应的表单文件 */
+          this.formInline[this.uploadName] = attIdList.join(',')
+          this.formInline = { ...this.formInline }
+        }
+      },
+      handleInput(value) {
+        this.$nextTick(() => {
+          this.formInline = { ...this.formInline }
+          this.$refs.ruleForm1.validateField([value])
+        })
+      },
+      IntegrateData() {
+        this.isFormInline = false
+        let rules = {}
+        this.ruleList.forEach((res, index) => {
+          const rule = []
+          if (res.field_must_input == 0) {
+            if (res.field_show_type === 'text') {
+              rule.push({
+                required: true,
+                message: res.db_field_txt + '不能为空',
+                trigger: 'blur'
+              })
+            } else if (res.field_show_type === 'CHECKBOX' || res.field_show_type === 'list_multi' ||
+              res.field_show_type === 'date' || res.field_show_type === 'file') {
+              rule.push({
+                required: true,
+                message: res.db_field_txt + '不能为空',
+                trigger: 'change'
+              })
+            } else if (res.field_show_type === 'NUMBER') {
+              rule.push({
+                required: true,
+                message: res.db_field_txt + '不能为空',
+                trigger: 'blur'
+              })
+            } else if (res.field_show_type === 'TEXTAREA') {
+              rule.push({
+                required: true,
+                message: res.db_field_txt + '不能为空',
+                trigger: 'blur'
+              })
+            } else if (res.field_show_type === 'RADIO' || res.field_show_type === 'list') {
+              rule.push({
+                required: true,
+                message: res.db_field_txt + '不能为空',
+                trigger: 'change'
+              })
+            }
+          }
+          if (rule.length > 0) {
+            rules[res.db_field_name] = rule
+          }
+        })
+        console.log(rules)
+        this.$set(this, 'rules', rules)
+        this.isFormInline = true
+        this.confirmLoading = false
+      },
+      getForm() {
+        this.confirmLoading = true
+        let params = {
+          flag: this.flag
+        }
+        getAction(this.url.getAddForm, params).then((res) => {
+          if (res.success) {
+            this.dataList = res.result
+            this.ruleList = res.result
+            this.IntegrateData()
+          }
+        })
+      },
+      dateChange(item) {
+        this.formInline[item.db_field_name] = moment(this.formInline[item.db_field_name]).format('YYYY-MM-DD')
+      },
+      onChange(item) {
+        let dateOne = moment(this.formInline[item][0]).format('YYYY-MM-DD')
+        let dateTwo = moment(this.formInline[item][1]).format('YYYY-MM-DD')
+        this.formInline[item] = [dateOne, dateTwo]
+      },
+      edit(item) {
+        getAction(this.url.getDocumentInfo, { id: item.id }).then((res) => {
+          if (res.success) {
+            this.formInline = res.result[0]
+          }
+        })
+      },
+      add(){
+        this.formInline = {}
+      }
+    }
+  }
+</script>
+<style>
+  .formAdd .ant-form-item-label {
+    width: 130px;
+  }
+
+  .formAdd .ant-form-item-control-wrapper {
+    display: inline-block;
+    width: calc(100% - 130px);
+  }
+
+  /*.formAdd .ant-form-item {*/
+  /*  margin-bottom: 20px;*/
+  /*}*/
+
+  .itemModel .ant-form-item-control-wrapper {
+    width: 100%;
+  }
+
+  .box-input .ant-select-selection--single {
+    height: 38px;
+  }
+
+  .box-input .ant-select-selection--multiple {
+    height: 38px;
+  }
+
+  .box-input .ant-select-selection__rendered {
+    line-height: 38px;
+    height: 38px;
+  }
+
+  .box-input .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
+    margin-top: 6px;
+  }
+
+  .box-input .ant-calendar-picker {
+    line-height: 38px;
+    height: 38px;
+  }
+
+  .box-input .ant-calendar-picker-input {
+    height: 38px;
+  }
+
+  .box-input .ant-input-number-input-wrap {
+    line-height: 38px;
+    height: 38px;
+  }
+</style>
+<style scoped>
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    /*align-items: center;*/
+  }
+
+  .title-text {
+    width: 90px;
+    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% - 130px);
+    display: inline-block;
+    margin-top: 2px;
+  }
+
+  .Required {
+    color: red;
+    margin-right: 4px;
+  }
+
+  .title-text-text {
+    margin-top: 11px;
+    display: inline-block;
+  }
+
+  .header-text {
+    font-size: 16px;
+    font-weight: bold;
+    margin-left: 15px;
+    /*border-bottom: 1px #d9d9d9 dashed;*/
+    height: 30px;
+    margin-bottom: 30px;
+  }
+
+  .formAdd {
+    /*margin-bottom: 40px;*/
+  }
+
+  .button-text {
+    height: 38px;
+    width: calc(100% - 120px);
+    line-height: 38px;
+    background: #fff;
+    border: 1px #00B3BE solid;
+    color: #00B3BE;
+  }
+</style>

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

@@ -48,7 +48,7 @@
     },
     methods:{
       beforeUpload(file) {
-        console.log(file)
+        // console.log(file)
         // let thisFileType = this.thisFileType.replace(/\s+/g, "");
         if(file.type==this.accept){
           this.fileTypeSatus = true;
@@ -62,7 +62,7 @@
         this.fileTypeSatus = true;
       },
       handleChange(info) {
-        console.log('info',info)
+        // console.log('info',info)
         let { file } = info;
         const status = info.file.status;
         info.fileList.forEach((val,index)=>{
@@ -98,7 +98,7 @@
             } else if (status === 'done') {
               this.fileList = []
               this.myfileList = info.fileList;
-              console.log('file3333',info.fileList)
+              // console.log('file3333',info.fileList)
               if (info.fileList.length > 20) {
                 info.fileList.splice(20)
                 // this.myfileList = info.fileList;
@@ -110,17 +110,17 @@
                     this.fileList.push(res)
                   }
                 })
-                console.log('file1111',this.fileList)
+                // console.log('file1111',this.fileList)
                 this.$emit('uploadSuccess', this.fileList)
                 this.$message.destroy()
                 this.$message.error('最多只能上传二十个');
                 return
               }
-              console.log('my222',this.myfileList)
+              // console.log('my222',this.myfileList)
               this.myfileList.forEach((res) => {
                 if (res.response) {
                   this.fileList.push(res.response.result)
-                  console.log('flist',res.response)
+                  // console.log('flist',res.response)
                 } else {
                   this.fileList.push(res)
                 }

jero-web/src/views/documentManage/ocr/index.vue

@@ -18,54 +18,26 @@
           批量删除
         </div>
       </div>
-<!--      <addForm></addForm>-->
+
     <!--        上传弹框-->
     <a-modal
       class="show-content"
       title="上传文件"
       :visible="fileVisible"
       :confirm-loading="confirmLoading"
-      @ok="handleOk"
+      @ok="modalOk"
       @cancel="handleCancel"
     >
-      <a-form-model
+      <addForm
-        class="tag-content"
         ref="fileForm"
+        @addFormClick="addFormClick"
+        :flag="'2'"
+        :accept="accept"
         v-if="fileVisible"
-        :model="form"
+        :url="url">
-        :rules="rules"
+      </addForm>
-        :label-col="labelCol"
-        :wrapper-col="wrapperCol"
-      >
-        <a-form-model-item ref="file" label="文件" prop="attId">
-          <a-button type="primary" class="button-text"
-                    @click="fileUpload()">
-            {{ (form.file === 'null' || form.file === '' ||
-            form.file == null) ? '点击上传' : '查看已上传文件'
-            }}
-          </a-button>
-
-          <!--              <a-button @click="fileUpload" type="primary">点击上传</a-button>-->
-        </a-form-model-item>
-        <a-form-model-item ref="standNumber" label="编号" prop="standNumber">
-          <a-input
-            v-model="form.standNumber"
-            placeholder="请输入编号"
-          />
-        </a-form-model-item>
-
-        <a-form-model-item ref="standName" label="名称" prop="standName">
-          <a-input
-            v-model="form.standName"
-            placeholder="请输入名称"
-          />
-        </a-form-model-item>
-        <a-form-model-item label="文本状态" prop="fileType">
-          <j-dict-select-tag type="list" v-model="form.fileType" dictCode="file_type" placeholder="请选择文本状态" />
-        </a-form-model-item>
-      </a-form-model>
-
     </a-modal>
+
     <!--        同步弹框-->
     <a-modal
       class="show-content"
@@ -117,7 +89,7 @@
   import { getAction, postAction, deleteAction } from '@/api/manage'
   import search from '@/components/search/index'
   import tableData from '@/components/tableDate/index'
-  import addForm from '@/components/tableDate/index'
+  import addForm from '@/components/ocrAddForm/index'
   import docTable from './modules/docTable'
   import ocrUpload from '@/components/ocrUpload/index'
   import { ACCESS_TOKEN } from "@/store/mutation-types"
@@ -179,6 +151,8 @@
           tableHeader: 'ocr/ocrRecord/getHeader',      //表格头部字段
           seachList: 'ocr/ocrRecord/queryCondition',   //搜索字段
           tableList: 'ocr/ocrRecord/page',         //表格数据
+          getAddForm: 'ocr/ocrRecord/getForm',   // 表单的字段
+          addInfo: 'ocr/OcrRestful/addOcrRecord',      //新增
         },
         queryParams:{},   //搜索条件
         //列表数据
@@ -279,23 +253,8 @@
 
       },
       //上传确定按钮
-      handleOk(){
+      modalOk(){
-        this.$refs.fileForm.validate((valid)=>{
+        this.$refs.fileForm.sumber()
-          let params={ ...this.form }
-          if(valid) {
-            postAction(`ocr/OcrRestful/addOcrRecord`,params).then(res=>{
-              if(res.success){
-                this.$message.success(res.result)
-                eventBUs.$emit('searchReset')
-                this.fileVisible=false
-                this.form={}
-                // this.$emit('ok')
-              }else{
-                this.$message.warning(res.message)
-              }
-            })
-          }
-        })
       },
       handleCancel(){
         this.fileVisible=false
@@ -350,7 +309,10 @@
         window.open('/pdf/web/viewer.html?file=' + encodeURIComponent('/jero-boot/sys/common/pdf/viewFile?id=' + val.id))
       },
       exportVisible(val){
-        this.fileVisible=val
+        // this.fileVisible=val
+      },
+      addFormClick() {
+        this.fileVisible = false
       }
     }
   }