feat: There is no way the, 会签征求意见 创建条款方式 改成 右侧滑出 一半文档预览 一半表单属性填写

src/pages/processCenter/pages/creatProcess/qbrk/step5.vue

@@ -473,6 +473,76 @@
             @submit="handleSubmit"
     >
     </ProcessFooter>
+    <el-drawer
+            ref="standard"
+            size="1400px"
+            :title="showDrawerTitle"
+            :visible.sync="showDrawer"
+            :before-close="showDrawerClose">
+            <div style="height: 100%;display: flex;">
+                <div class="left">
+                    <el-tabs v-model="editableTabsValue" type="card" style="height: 100%" @tab-click="previewIframe">
+                        <el-tab-pane
+                                style="height: 100%"
+                                v-if="FBGBUSSFileList.length > 0"
+                                v-for="(item, index) in FBGBUSSFileList"
+                                :key="item.name"
+                                :label="item.name"
+                                :name="item.id"
+                        >
+                            <iframe width="100%" height="100%" wframeborder="0" ref="iframe" v-bind:src="iframeUrl"></iframe>
+                        </el-tab-pane>
+                    </el-tabs>
+                </div>
+                <div class="rightDiv">
+                    <div class="search-area">
+                        <el-form :model="showForm" :rules="showFormRules" class="label-input-form" style="width: 100%;" ref="showForm">
+                            <el-form-item label="条款号" prop="modelNum" class="add-form-item">
+                                <el-input
+                                        v-model="showForm.modelNum"
+                                        clearable
+                                ></el-input>
+                            </el-form-item>
+                            <el-form-item label="修改前" prop="modelUpdBefore" class="add-form-item">
+                                <el-input
+                                        v-model="showForm.modelUpdBefore"
+                                        clearable
+                                ></el-input>
+                            </el-form-item>
+                            <el-form-item label="修改后" prop="modelUpdAfter" class="add-form-item">
+                                <el-input
+                                        v-model="showForm.modelUpdAfter"
+                                        clearable
+                                ></el-input>
+                            </el-form-item>
+                            <el-form-item label="修改理由" prop="modelContent" class="add-form-item">
+                                <el-input
+                                        v-model="showForm.modelContent"
+                                        clearable
+                                ></el-input>
+                            </el-form-item>
+                            <el-form-item label="提出部门" prop="zrDeptIdName" class="add-form-item form-item-disabled">
+                                <el-input
+                                        v-model="showForm.zrDeptIdName" disabled
+                                        clearable
+                                ></el-input>
+                            </el-form-item>
+                            <el-form-item label="责任人" prop="zrUserIdName" class="add-form-item form-item-disabled">
+                                <el-input
+                                        v-model="showForm.zrUserIdName" disabled
+                                        clearable
+                                ></el-input>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                    <div class="demo-drawer-footer">
+                        <el-button :loading="isSubmit" size="mini" class="common-button-primary" icon="el-icon-check" type="primary" @click="createRowSubmit">
+                            提交
+                        </el-button>
+                    </div>
+                </div>
+            </div>
+    </el-drawer>
     <el-dialog width='400px' :visible.sync="fileMadel" title="上传文件">
         <el-upload
                 multiple
@@ -817,6 +887,7 @@
     import ProcessHeader from '../../components/ProcessHeader'
     import ProcessFooter from '../../components/ProcessFooter'
     import ProcessTitle from '../../components/ProcessTitle'
+    import { onlyOfficeUrl,kkFileViewUrl } from '@/sysConfig'
     import {saveTaskFirst, queryTaskFirst, getBusStandFileByAttId,inboundLiaisonDetail} from "api/process";
     import {getEvaluationIndex} from "api/businessApi";
     import TreeSelect from '@/components/treeSelect/treeSelect.vue';
@@ -906,6 +977,22 @@
                         }
                     }]
                 },
+                iframeUrl:"",
+                showForm:{
+                    modelNum: '',
+                    modelName: "",
+                    modelUpdBefore: "",
+                    modelUpdAfter: "",
+                    modelContent: "",
+                    zrUserId:this.$store.getters.userInfo.userId,
+                    zrUserIdName:this.$store.getters.userInfo.userName,
+                    zrDeptId:this.$store.getters.userInfo.institutionId,
+                    zrDeptIdName:this.$store.getters.userInfo.institutionName,
+                    children:[],
+                },
+                editableTabsValue:"",
+                showDrawerTitle:"",
+                showDrawer:false,
                 taskInfo: '会签征求意见',
                 loading: false,
                 disabledState: true,
@@ -1160,6 +1247,20 @@
                         { required: true, message: '选择维护模块名称', trigger: 'blur' },
                     ],
                 },
+                showFormRules:{
+                    modelNum: [
+                        { required: true, message: '请填写条款号', trigger: 'blur' },
+                    ],
+                    modelUpdBefore: [
+                        { required: true, message: '请填写修改前', trigger: 'blur' },
+                    ],
+                    modelUpdAfter: [
+                        { required: true, message: '请填写修改后', trigger: 'blur' },
+                    ],
+                    modelContent: [
+                        { required: true, message: '请填写修改理由', trigger: 'blur' },
+                    ],
+                },
                 roleRules:{
                     qcUserName: [
                         { required: true, message: '选择其他起草人', trigger: 'blur' },
@@ -1329,6 +1430,37 @@
             },
         },
         methods: {
+            previewShow(attId) {
+                return new Promise((resolve, reject) => {
+                    getBusStandFileByAttId({
+                        attId
+                    }).then(res => {
+                        if(res){
+                            const history = res;
+                            const editFileInfo = res.data
+                            if(editFileInfo.fileSuffix.toLowerCase() === 'pdg'){
+                                this.iframeUrl = 'book://ssreader/e0?url='+editFileInfo.downLoadUrl
+                            }else if(editFileInfo.fileSuffix.toLowerCase() === 'pdf'){
+                                this.iframeUrl = './static/pdf/web/viewer.html?file=' + encodeURIComponent('/api/att/attFile/getFileInfo?fileId=' + editFileInfo.id)
+                            }else {
+                                const nowTime = new Date().getTime()
+                                // window.open(onlyOfficeUrl+'/onlyOffice?oldFileName=' + editFileInfo.oldFileName + '&fileType=' + editFileInfo.fileSuffix + '&attId=' + editFileInfo.id + '&fileUrl=' + editFileInfo.downLoadUrl + '&key=' + editFileInfo.id + nowTime+'&filePath='+editFileInfo.filePath+'&fileName='+editFileInfo.fileName)
+                                this.iframeUrl = kkFileViewUrl+'/onlinePreview?url='+encodeURIComponent(Base64.encode(editFileInfo.downLoadUrl));
+                            }
+                            this.$forceUpdate()
+                            resolve(history)
+                        }
+                    }).catch(e => {
+                    })
+                })
+            },
+            previewIframe(targetName, action){
+                let attId = targetName.name
+                this.previewShow(attId)
+            },
+            showDrawerClose () {
+                this.showDrawer = false
+            },
             filterData2(){
                 let spanOneArr = []
                 let concatOne = 0
@@ -1483,6 +1615,25 @@
                     this.zrIdList.push(item.id)
                 })
             },
+            createRowSubmit(){
+                this.$refs['showForm'].validate((valid) => {
+                    if (valid) {
+                        const list = {
+                            modelNum: this.showForm.modelNum,
+                            modelUpdBefore: this.showForm.modelUpdBefore,
+                            modelUpdAfter: this.showForm.modelUpdAfter,
+                            modelContent: this.showForm.modelContent,
+                            zrUserId:this.$store.getters.userInfo.userId,
+                            zrUserIdName:this.$store.getters.userInfo.userName,
+                            zrDeptId:this.$store.getters.userInfo.institutionId,
+                            zrDeptIdName:this.$store.getters.userInfo.institutionName,
+                            children:[],
+                        };
+                        this.form.modelData.push(list);
+                        this.$message.success("新增成功！")
+                    }
+                })
+            },
             createRow() {
                 // 创建行
                 // if (this.diaTable.length >= 6) { // 判断当前表格是否可继续创建
@@ -1493,25 +1644,31 @@
                 //     });
                 //     return false;
                 // }
-                const list = {
+                if(this.FBGBUSSFileList.length > 0){
-                    id: this.form.modelData.length + 1,
+                    this.editableTabsValue = this.FBGBUSSFileList[0].id
-                    modelNum: '',
+                    this.previewShow(this.FBGBUSSFileList[0].id)
-                    orderNum: this.form.modelData.length + 1, // orderNum为新创建行的索引
+                }
-                    pid: '0',
+                this.showDrawer = true
-                    modelIndex: this.form.modelData.length,
+                this.showDrawerTitle = "新增征求意见"
-                    disabled1: false,
+                // const list = {
-                    disabled2: false,
+                //     id: this.form.modelData.length + 1,
-                    modelName: "",
+                //     modelNum: '',
-                    modelUpdBefore: "",
+                //     orderNum: this.form.modelData.length + 1, // orderNum为新创建行的索引
-                    modelUpdAfter: "",
+                //     pid: '0',
-                    modelContent: "",
+                //     modelIndex: this.form.modelData.length,
-                    zrUserId:this.$store.getters.userInfo.userId,
+                //     disabled1: false,
-                    zrUserIdName:this.$store.getters.userInfo.userName,
+                //     disabled2: false,
-                    zrDeptId:this.$store.getters.userInfo.institutionId,
+                //     modelName: "",
-                    zrDeptIdName:this.$store.getters.userInfo.institutionName,
+                //     modelUpdBefore: "",
-                    children:[],
+                //     modelUpdAfter: "",
-                };
+                //     modelContent: "",
-                this.form.modelData.push(list);
+                //     zrUserId:this.$store.getters.userInfo.userId,
+                //     zrUserIdName:this.$store.getters.userInfo.userName,
+                //     zrDeptId:this.$store.getters.userInfo.institutionId,
+                //     zrDeptIdName:this.$store.getters.userInfo.institutionName,
+                //     children:[],
+                // };
+                // this.form.modelData.push(list);
             },
             // createRow() {
             //     // 创建行
@@ -2850,6 +3007,40 @@
 
 <style lang="less" scoped>
     @import '~@/assets/styles/style';
+    /deep/ .left {
+        width: 60%;
+        height: calc(~'100% - 52px');
+    }
+    /deep/ .el-tabs__content{
+        height: 100% !important;
+    }
+    /deep/ .rightDiv {
+        background: #fff;
+        width: 40%;
+        height: 98%;
+        .height {
+            margin-bottom: 0;
+            padding: 10px 20px;
+            font-size: 18px;
+            font-weight: bold;
+            color: #333333;
+            border-bottom: 1px solid #e5e5e5;
+        }
+        .search-area {
+            height: calc(~'100% - 52px');
+            overflow: auto;
+        }
+        .demo-drawer-footer {
+            width: 100%;
+            padding: 0 20px;
+            height: 50px;
+            line-height: 50px;
+            border-top: 1px solid #e8e8e8;
+            text-align: right;
+            background: #fff;
+            z-index: 999;
+        }
+    }
     /deep/ .column1{
         font-size: 18px !important;
     }