拆分详情表格增加编辑

2022-04-05 19:32:38 +08:00
parent 29e4a3ac4a
commit 78ba4bde0e
10 changed files with 177 additions and 68 deletions
@@ -4,9 +4,9 @@
      <a-table
        class="table"
        rowKey="id"
-        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :row-selection="{ fixed: true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange  }"
        :pagination="false"
-        :scroll="{x: 600}"
+        :scroll="{x: true}"
        :data-source="dataSource"
        :loading="loading"
        :columns="columns"
@@ -20,6 +20,7 @@
            <span class="content-show" href="javascript:;" @click="showContent">{{record.iterms_conditions&&record.iterms_conditions!=='null'?record.iterms_conditions.replace(/<.*?>/ig, ' ') : ''}}</span>
          </a-tooltip>
        </span>
+
        <span slot="operation" slot-scope="record" class="operate">
           <a v-for="(ol,index) in OperationList"
              @click="OperationClick(ol,record)">
@@ -28,6 +29,11 @@
              </span>
           </a>
         </span>
+        <span slot="urlClick" slot-scope="text,record">
+              <a class="text" :title="text" @click="urlClick(text)">
+                {{text && text.length > 18?text.slice(0,17)+'...':text}}
+              </a>
+        </span>
      </a-table>
    </div>
    <div class="page" v-if="dataSource.length > 0">
@@ -156,8 +162,13 @@
                  customRender: 'showContent'
                }
              }
+              if (res.urlClick) {
+                this.columns[index].scopedSlots = {
+                  customRender: 'urlClick'
+                }
+              }
            })
-            // console.log('columns',this.columns)
+
            let width = 0
            if (this.OperationList.length > 0) {
              for (let i = 0; i < this.OperationList.length; i++) {
@@ -173,7 +184,7 @@
                scopedSlots: { customRender: 'operation' }
              })
            }
-
+            console.log('columns',this.columns)
          }
        })
      },
@@ -183,7 +194,7 @@
        this.getTableList()
      },
      getTableList() {
-        console.log('this.searchParmestable',this.searchParmes)
+        // console.log('this.searchParmestable',this.searchParmes)
        let pageNo = JSON.parse(JSON.stringify(this.pageNo))
        let pageSize = JSON.parse(JSON.stringify(this.pageSize))
        let params = {
@@ -235,6 +246,9 @@
      },
      showContent(item, index) {
        this.$emit('showContent', item)
+      },
+      urlClick(item) {
+        window.open(item)
      }
    }
  }
@@ -17,7 +17,7 @@
      :showUploadList="false"
      @change="handleChange">
      <!--        <p><a-icon style="font-size: 67px;color: #c0c4cc;" type="cloud-upload" /></p>-->
-      <a-icon type="import" :rotate="-90" />{{ $t('import') }}
+      <a-icon type="import" :rotate="-90" class="import" />{{ $t('import') }}
 <!--      <a-button  type="primary" ghost class="ant-upload-text" style="font-size: 14px;line-height: 30px">{{$t('clickUpload')}}</a-button>-->
    </a-upload>
    <!--    </a-modal>-->
@@ -96,12 +96,17 @@
        // console.log('rrr',this.myfileList)
      },
      handleChange(info) {
-        console.log('info',info)
+        // console.log('info',info)
        let { file } = info;
        const status = info.file.status;
        info.fileList.forEach((val,index)=>{
          if(val.response && !val.response.result){
-            this.$message.success(val.response.message);
+            if(val.response.success){
+              this.$message.success(val.response.message);
+            }else{
+              this.$message.error(val.response.message);
+            }
+
            info.fileList.splice(index,1)
          }
        })
@@ -44,7 +44,7 @@
              <span>{{item.db_field_txt}}</span>
            </div>
            <a-range-picker class="box-input" v-model="queryParam[item.db_field_name]"
-                            :placeholder="$t('PleaseSelect')+item.db_field_txt"
+
                            @change="onChange(item.db_field_name)"></a-range-picker>
          </div>
          <!--          <div class="box-title-text" v-else-if="item.field_show_type == '5'">-->
@@ -104,13 +104,13 @@
                                :placeholder="$t('PleaseSelect')+item.db_field_txt" :type="'select'"
                                :triggerChange="false" :dictCode="item.dict_field"/>
          </div>
-          <div class="box-title-text" v-else-if="item.field_show_type == '6' || item.field_show_type == '5'">
-            <div class="title-text" :title="item.db_field_txt">
-              <span>{{item.db_field_txt}}</span>
-            </div>
-            <a-range-picker class="box-input" v-model="queryParam[item.db_field_name]"
-                            @change="onChange(item.db_field_name)"></a-range-picker>
-          </div>
+<!--          <div class="box-title-text" v-else-if="item.field_show_type == '6' || item.field_show_type == '5'">-->
+<!--            <div class="title-text" :title="item.db_field_txt">-->
+<!--              <span>{{item.db_field_txt}}</span>-->
+<!--            </div>-->
+<!--            <a-range-picker class="box-input" v-model="queryParam[item.db_field_name]"-->
+<!--                            @change="onChange(item.db_field_name)"></a-range-picker>-->
+<!--          </div>-->
          <!--          <div class="box-title-text" v-else-if="item.field_show_type == '5'">-->
          <!--            <div class="title-text" :title="item.db_field_txt">-->
          <!--              <span>{{item.db_field_txt}}</span>-->
@@ -137,7 +137,7 @@
                  <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
                  <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px" v-if="searchList.length > 3">
-                {{ !toggleSearchStatus ? $t('open') : $t('away') }}
+                <span class="icon-open">{{ !toggleSearchStatus ? $t('open') : $t('away') }}</span>
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
               </a-col>
@@ -238,7 +238,7 @@
  }
 </script>

-<style scoped>
+<style lang="less" scoped>
  .box-title-text {
    line-height: 1.4;
    display: flex;
@@ -272,4 +272,18 @@
    height: 38px;
    /*margin-top: 2px;*/
  }
+  .table-page-search-submitButtons{
+    a{
+      display: flex;
+      justify-content: start;
+      line-height: 38px;
+    }
+    .icon-open{
+      display: inline-block;
+      min-width: 30px;
+    }
+    i{
+      line-height: 38px;
+    }
+  }
 </style>
@@ -187,7 +187,7 @@
          pageNo: pageNo + '',
          pageSize: pageSize + ''
        }
-        console.log('parmsss',params)
+        // console.log('parmsss',params)
        this.loading = true
        getAction(this.url.tableList, params).then((res) => {
          if (res.success) {
@@ -133,14 +133,14 @@

      </a-col>
      <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
-               <a-col :md="6" :sm="24">
-                  <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
-                  <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
-                <a @click="handleToggleSearch" style="margin-left: 8px" v-if="searchList.length > 3">
-                {{ !toggleSearchStatus ? $t('open') : $t('away') }}
-                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
-              </a>
-               </a-col>
+         <a-col :md="6" :sm="24">
+            <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
+            <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
+          <a @click="handleToggleSearch" style="margin-left: 8px" v-if="searchList.length > 3">
+            {{ !toggleSearchStatus ? $t('open') : $t('away') }}
+            <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+          </a>
+         </a-col>
      </span>
    </a-row>
  </a-form>
@@ -315,7 +315,10 @@
      detailClick(val){
        this.$router.push({
          path:'/docManage/splitting/splitDetail',
-          query: { infoId:val.id }
+          query: {
+            infoId:val.id,
+            infoNumber:val.serialNumber
+          }
        })
      },

@@ -93,7 +93,6 @@
                              </div>
                              <a-form-model-item class="itemModel" :prop="item.db_field_name">
                                <a-date-picker class="box-input"
-                                               :placeholder="$t('PleaseSelect')+item.db_field_txt"
                                               @change="dateChange(item)"
                                               format="YYYY-MM-DD"
                                               v-model="formInline[item.db_field_name]"
@@ -251,12 +250,13 @@
                  <a-row :gutter="24" class="split-content" id="split-content" v-for="(item, index) in contentList" :key="index">
                    <div class="split-row">
                      <div class="row-left">
-                        <a-textarea v-if="item.type==='TEXT'" v-model="item.itemContent" :placeholder="$t('pleaseEnter')+$t('content')" auto-size />
+                        <a-textarea v-if="item.type==='TEXT'" v-model="item.itemContent" :placeholder="$t('pleaseEnter')+$t('content')" />
                        <img v-if="item.type==='IMG'" :src="item.thumbUrl?item.thumbUrl:item.itemContent" alt="" @click="preImg(item)">
                        <div v-if="item.type==='TABLE'" v-html="item.itemContent" class="item-table"></div>
                      </div>
                      <div class="row-right">
                        <a-button class="row-btn-add" @click="splitAdd(index)">{{$t('Add')}}</a-button>
+                        <a-button class="row-btn-edit" @click="splitEdit(index,item)" v-if="item.type=='TABLE'">{{$t('edit')}}</a-button>
                        <a-button @click="splitDelete(item,index)">{{$t('delete')}}</a-button>
                      </div>
                    </div>
@@ -541,6 +541,7 @@
          ]
        },
        numberFlag:false,
+        itemVal:{}
      }
    },
    props:{
@@ -572,10 +573,10 @@
        type:String,
        default:''
      },
-      itemVal:{
-        type:Object,
-        default:{}
-      }
+      // itemVal:{
+      //   type:Object,
+      //   default:{}
+      // }
    },
    watch:{
      selected(val){
@@ -635,6 +636,14 @@
          this.addIndex=val
        }
      },
+      //编辑按钮
+      splitEdit(index,item){
+        this.tableVisible=true
+        this.$nextTick(() => {
+          this.$refs.ueditor.setContent(item.itemContent)
+        })
+        console.log('ineciem',index,item)
+      },
      //删除按钮
      splitDelete(item,index){
        // console.log('itme',item,this.contentList)
@@ -663,6 +672,7 @@
              } else {
                url = this.url.addInfo
              }
+
              let params = JSON.parse(JSON.stringify(this.formInline))

              Object.keys(params).forEach(res => {
@@ -671,12 +681,19 @@
                }
              })

-              if(JSON.stringify(this.itemVal)=="{}"){
                params.info_id=this.infoId
                params.menu_id=this.menuId
-              }
-              // params.menuId=this.menuId
-              params.itemValEOList=this.contentList
+
+              let contentList=JSON.parse(JSON.stringify(this.contentList))
+              contentList.forEach((item,index)=>{
+                if(item.type==='IMG'){
+                  // console.log('img',item)
+                  this.$delete(item,'thumbUrl')
+                  // contentList[index]= { ...item }
+                }
+              })
+              // console.log('contentList',contentList)
+              params.itemValEOList=contentList
              // console.log('paramsformInline',params)
              params.delItemIds=this.deleteIds.join(',')
              axios({
@@ -767,7 +784,7 @@
      },
      //上传文件
      uploadSuccess1(data,imgs) {
-        console.log('dataimg',data,imgs)
+        // console.log('dataimg',data,imgs)
        let lengthImg=imgs.length
        for(let i = this.contentList.length;i>this.addIndex;i--){
          this.contentList[i+lengthImg-1]=this.contentList[i-1]
@@ -803,6 +820,8 @@
          type:'TABLE',
          itemContent:this.ueContent
        }
+        // this.uEditorChange()
+        // console.log('this.contentList',this.contentList)
      },
      //表格取消按钮
      handleCancelTable(){
@@ -816,6 +835,7 @@
          type:'TABLE',
          itemContent:val
        }
+        this.ueContent=val

      },
      //取消行数列数按钮
@@ -989,6 +1009,7 @@
      edit(item) {
        this.visible=true
        this.type = 'edit'
+        this.itemVal=item
        // this.getForm(() => {
        //   this.formInline=item
        // })
@@ -996,7 +1017,7 @@
          getAction(this.url.getDocumentInfo, { id: item.id }).then((res) => {
            if (res.success) {
              this.formInline = res.result
-              console.log('form11111',this.formInline)
+              // console.log('form11111',this.formInline)
            }
          })

@@ -1006,6 +1027,7 @@
        this.getForm()
        this.visible=true
        this.formInline = {}
+        this.contentList=[]
        this.type = 'add'

      },
@@ -1104,7 +1126,7 @@
        .row-right{
          min-width: 150px;
          margin-left: 20px;
-          .row-btn-add{
+          .row-btn-add, .row-btn-edit{
            margin-right: 20px;
          }
        }
@@ -1182,7 +1204,10 @@
          table.word-table {
            width: 100%;
            height: 100%;
-
+            .wordImg{
+              width:40px;
+              height: auto;
+            }
          }
        }
      }
@@ -8,7 +8,7 @@
              <a-tree
                v-if="gData.length>0"
                :selected-keys="selectedKeys"
-                :expanded-keys="expandedKeys"
+                :expanded-keys.sync="expandedKeys"
                :auto-expand-parent="autoExpandParent"
                :defaultExpandAll="true"
                :tree-data="gData"
@@ -16,24 +16,42 @@
                @rightClick="rightClick"
                @select="onSelect"
              >
-                <template slot="title" slot-scope="{ title }">
-                  <span v-if="title.indexOf(searchValue) > -1" :title="title">
+<!--                @rightClick="rightClick"-->
+                <template #title="{ key: treeKey, title, record }">
+                  <a-dropdown :trigger="['contextmenu']">
+<!--                    <span>{{ title }}</span>-->
+                    <span v-if="title.indexOf(searchValue) > -1" :title="title">
                    {{ title.substr(0, title.indexOf(searchValue)) }}<span style="color: #f50">{{ searchValue }}</span>{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                  </span>
-                  <span v-else :title="title">{{ title }}</span>
+                    <span v-else :title="title">{{ title }}</span>
+                    <template #overlay>
+                      <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey, record)">
+                        <a-menu-item key="1" @click="orgAdd">{{$t('newNode')}}</a-menu-item>
+                        <a-menu-item key="2" @click="orgEdit">{{$t('modifyNode')}}</a-menu-item>
+                        <a-menu-item key="3" @click="orgDelete" v-if="deleteNode" >{{$t('deleteNode')}}</a-menu-item>
+                      </a-menu>
+                    </template>
+                  </a-dropdown>
                </template>
+
+<!--                <template slot="title" slot-scope="{ title }">-->
+<!--                  <span v-if="title.indexOf(searchValue) > -1" :title="title">-->
+<!--                    {{ title.substr(0, title.indexOf(searchValue)) }}<span style="color: #f50">{{ searchValue }}</span>{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}-->
+<!--                  </span>-->
+<!--                  <span v-else :title="title">{{ title }}</span>-->
+<!--                </template>-->
              </a-tree>
-              <div v-if="NodeTreeItem" :style="tmpStyle" >
-                <div class="menu-item" @click="orgAdd">
-                  {{$t('newNode')}}
-                </div>
-                <div class="menu-item" @click="orgEdit">
-                  {{$t('modifyNode')}}
-                </div>
-                <div class="menu-item menu-bottom" @click="orgDelete" v-if="NodeTreeItem">
-                  {{$t('deleteNode')}}
-                </div>
-              </div>
+<!--              <div v-if="NodeTreeItem" :style="tmpStyle" >-->
+<!--                <div class="menu-item" @click="orgAdd">-->
+<!--                  {{$t('newNode')}}-->
+<!--                </div>-->
+<!--                <div class="menu-item" @click="orgEdit">-->
+<!--                  {{$t('modifyNode')}}-->
+<!--                </div>-->
+<!--                <div class="menu-item menu-bottom" @click="orgDelete" v-if="NodeTreeItem">-->
+<!--                  {{$t('deleteNode')}}-->
+<!--                </div>-->
+<!--              </div>-->
            </div>
          </div>
          <div class="split-detail-right">
@@ -86,7 +104,7 @@
                  :OperationList="OperationList"
                  :infoId="$route.query.infoId"
                  :menuId="menuId"
-                  showAction
+                  :showAction="true"
                  @onSelectChange="onSelectChange"
                  @deleteClick="deleteClick"
                  @editClick="editClick"
@@ -154,7 +172,7 @@
              :ids="ids">
            </split-bat-form>
          </a-modal>
-          <split-add-form ref="splitForm" v-if="addVisible" :addVisible="addVisible" :formTitle="formTitle" :flag="'4'" :url="url" :infoId="infoId" :menuId="menuId" :itemId="itemId" :itemVal="itemVal" @closeVisible="closeVisible" @sumber="sumber"></split-add-form>
+          <split-add-form ref="splitForm" v-if="addVisible" :addVisible="addVisible" :formTitle="formTitle" :flag="'4'" :url="url" :infoId="infoId" :menuId="menuId" :itemId="itemId"  @closeVisible="closeVisible" @sumber="sumber"></split-add-form>

        </div>
      </a-card>
@@ -171,6 +189,7 @@
  import upload from '@/components/SplitImport/index'
  import axios from 'axios'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
+  import moment from 'moment'
  import eventBUs from '@/common/event'
  import Vue from 'vue'
  export default {
@@ -265,7 +284,14 @@
        token:Vue.ls.get(ACCESS_TOKEN),
        // upAccept:'.zip',  //导入文件类型
        uploadMenuId:'',
-        selectedKeys:[]
+        selectedKeys:[],
+        deleteNode:false,
+
+      }
+    },
+    watch:{
+      deleteNode(){
+
      }
    },
    mounted() {
@@ -375,7 +401,9 @@
      },
      //鼠标右键
      rightClick({event,node}){
-        console.log('eee',event,node)
+
+        this.deleteNode=node._props.dataRef.pid?true:false
+        // console.log('eee',event,node)
        // this.NodeTreeItemVisible=true
        const x =
          event.currentTarget.offsetLeft + event.currentTarget.clientWidth;
@@ -467,6 +495,9 @@
            }
        })
      },
+      onContextMenuClick(treeKey, menuKey,) {
+        // console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
+      },
      //清空按钮
      resetSearch(){
        this.menuId=''
@@ -489,9 +520,10 @@
          }
          this.$refs.ruleForm.validate(valid=>{
            if(valid){
-              this.flag=true
+
              // console.log('parms',this.params)
-              if(this.flag){
+              if(!this.flag){
+                this.flag=true
                postAction(`split/sarFileSplitMenu/addMenu`,params).then(res=>{
                  if(res.success){
                    this.menuRightVisible=false
@@ -521,6 +553,7 @@
            info_id: this.infoId,
            ...this.form,
          }
+          if(!this.flag){
          this.flag=true
          // console.log('parms',params)
          putAction(`split/sarFileSplitMenu/updateMenu`,params).then(res=>{
@@ -536,6 +569,7 @@
            this.flag=false
            this.menuRightVisible=false
          })
+          }
        }
      },
      //获取列表数据
@@ -653,7 +687,7 @@
      },
      //上传成功
      uploadSuccess(data,status){
-        console.log('data111',data)
+        // console.log('data111',data)
        if(status==='success'){
          let queryParam={
            menu_id:this.menuId,
@@ -676,10 +710,11 @@
      },
      //导出
      handleExportManage(){
-        let name = this.$t('DocumentSplitting')+'.zip'
+        let dateName = moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
+        let name = this.$route.query.infoNumber +' '+ dateName+'.zip'
        let query = {
          infoId:this.infoId,
-          exportName:'',
+          exportName:name,
          idList:this.selectedRowKeys.join(',')
        }

@@ -1037,6 +1072,9 @@
        width: 260px;
        padding-right: 20px;
        border-right: 1px solid #666666;
+        .split-detail-left-tree{
+          width: 240px;
+        }
        .menu-item{
          padding: 2px 8px;
          border: 1px solid #000000;
@@ -1119,6 +1157,10 @@
    .upload-split{
      .ant-upload{
        color:#040B29;
+        i.import{
+          display: inline-block;
+          margin-right: 4px;
+        }
      }
    }
  }
@@ -1143,4 +1185,10 @@
        }
      }
  }
+  .item-content-show{
+    .wordImg{
+      width: 40px;
+      height: auto;
+    }
+  }
 </style>
@@ -298,7 +298,7 @@
      //删除按钮
      deleteArea(val){
        this.$confirm({
-          title: this.$t('labelAreaDeleted'),
+          title: this.$t('confirmDeletion'),
          content: '',
          onOk:
            async () => {
@@ -326,7 +326,7 @@
      this.showFlowData();
    },
    mounted() {
-      console.log('disableEdit',this.disableEdit)
+      // console.log('disableEdit',this.disableEdit)
      this.loadContent()
      this.loadShowArea()
      // console.log('edit',this.submitEdit)