布局调整

src/views/report_manage/reportV2/components/chooseCooperaUserDia.vue

@@ -0,0 +1,193 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    :title="$t('ReportManage.ReportList.choose_cooper')"
+    width="650px"
+    :visible.sync="isShow"
+    :modal-append-to-body="false"
+    :append-to-body="false"
+    @close="closeDia"
+  >
+      <div class="dialog-wrap">
+        <div class="before-transfer transfer">
+            <div class="search">
+                <el-input 
+                  :placeholder="'搜索'" 
+                  suffix-icon="el-icon-search" 
+                  style="width:100%;"
+                  v-model="searchText" 
+                  @input="$refs['trans-tree'].filter(searchText)"
+                ></el-input>
+            </div>
+            <div class="content">
+                <el-tree 
+                    node-key="NodeIdKey"
+                    ref="trans-tree"
+                    show-checkbox
+                    :data="treeData"
+                    :props="{
+                        label:'NodeName',
+                        children:'Children'
+                    }"
+                    :filter-node-method="filterNode"
+                    @check-change="handleCheckChange"
+                ></el-tree>
+            </div>
+        </div>
+        <div class="after-transfer transfer">
+            <div class="head">
+                <span>已选{{choosedList.length}}项</span>
+                <span class="btn-text delete" @click="clearUser">{{$t('SystemManage.ReportApprove.clear_btn')}}</span>
+            </div>
+            <ul
+              class="content"
+            >
+                <li class="list-item" v-for="item in choosedList" :key="item.NodeIdKey">
+                    <span class="name">{{item.NodeName}}</span>
+                    <span class="icon-btn" style="color:#C0C4CC;">
+                        <i class="el-icon-close" @click.stop="removeItem(item)"></i>
+                    </span>
+                </li>
+            </ul>
+        </div>
+      </div>
+      <div class="dialog-btn">
+          <el-button type="primary" plain @click="closeDia">{{$t('Dialog.cancel_btn')}}</el-button>
+          <el-button type="primary" @click="handleSaveChecked">{{$t('Dialog.confirm_btn')}}</el-button>
+      </div>
+  </el-dialog>
+</template>
+<script>
+import { departInterence } from "@/api/api.js";
+import { traverseTree } from "@/utils/commonOptions"
+export default {
+  props: {
+    isShow: {
+      type: Boolean
+    },
+    users: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      searchText: '',
+      treeData: [],
+      choosedList: []
+    }
+  },
+  watch: {
+    isShow(nval) {
+      if(!nval) return
+
+      this.getTreeData()
+    }
+  },
+  methods:{
+    closeDia() {
+      this.$emit('update:isShow',false)
+    },
+
+    handleSaveChecked() {
+      if(!choosedList) return this.$message.warning('请选择用户')
+
+      this.$emit('save',choosedList.filter(_ => _.NodeId))
+    },
+
+    async getTreeData() {
+      const res = await departInterence.getSystemUser({
+                KeyWord: ''
+      })
+
+      if(res.Ret !== 200) return
+      this.treeData = res.Data||[];
+      //遍历加上唯一的key
+      traverseTree(
+          {Children:this.treeData},
+          {
+              childKey:'Children',
+              nodeKey:'NodeIdKey',
+              cb:(node)=>node.NodeType===3,
+              cb2:(node)=>node.NodeId+''
+          }
+      )
+      
+      // this.$nextTick(()=>{
+      //     const keys = this.users.map(i=>{
+      //         return i.NodeId
+      //     })
+      //     this.$refs["trans-tree"].setCheckedKeys(keys)
+      //     this.choosedList = _.cloneDeep(this.users)
+      // })
+    },
+
+    filterNode(value,data) {
+      if(!value) return true
+
+      return data.NodeName.indexOf(value)!==-1
+    },
+
+    handleCheckChange() {
+      this.choosedList = this.$refs['trans-tree'].getCheckedNodes(true).filter(_ => _.NodeType===3)
+    },
+
+    clearUser() {
+      this.$refs["trans-tree"].setCheckedKeys([])
+      this.choosedList = []
+    },
+
+    //清除已选
+    removeItem(item) {
+      const {NodeIdKey} = item
+      this.$refs["trans-tree"].setChecked(NodeIdKey,false,false)
+      const index = this.choosedList.findIndex(i=>i.NodeIdKey===NodeIdKey)
+      index!==-1&&this.choosedList.splice(index,1)
+    }
+  },
+}
+</script>
+<style scoped lang='scss'>
+.dialog-wrap {
+  display: flex;
+  align-items: center;
+  gap:12px;
+    .transfer{
+        display: flex;
+        flex-direction: column;
+        width:254px;
+        height: 400px;
+        border:1px solid #DCDCDC;
+        border-radius: 6px;
+        padding:8px;
+        .head,.search,.content{
+            padding:10px;
+        }
+        .head{
+            display: flex;
+            justify-content: space-between;
+            .btn-text{
+                cursor: pointer;
+                &.delete{
+                    color:red;
+                }
+            }
+        }
+        .content{
+            flex:1;
+            overflow-y: scroll;
+            margin-bottom: 10px;
+            .list-item{
+                cursor: pointer;
+                padding:6px 0;
+                display: flex;
+                justify-content: space-between;
+            }
+        }
+    }
+}
+.dialog-btn{
+    margin:40px 0;
+    text-align: center;
+}
+</style>

src/views/report_manage/reportV2/components/reportBaseInfoDia.vue

@@ -1,185 +1,197 @@
 <template>
-  <el-dialog
-    :title="$t('ReportManage.ReportList.information_title')"
-    :visible.sync="show"
-    :modal-append-to-body="false"
-    :close-on-click-modal="false"
-    :center="true"
-    v-dialogDrag
-    custom-class="dialogclass"
-    width="650px"
-    @close="handleClose"
-  >
-    <el-form
-      :model="formData"
-      :rules="rules"
-      ref="baseinfoForm"
-      class="baseinfo-form-wrap"
-      label-width="125px"
+  <div>
+    <el-dialog
+      :title="$t('ReportManage.ReportList.information_title')"
+      :visible.sync="show"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      :center="true"
+      v-dialogDrag
+      custom-class="dialogclass"
+      width="650px"
+      @close="handleClose"
     >
-      <el-form-item prop="type" :label="$t('ReportManage.ReportList.label_add_way')">
-        <el-radio-group
-          v-model="formData.type"
-          :disabled="id"
-          @change="handleUpdateBaseInfo"
-        >
-          <el-radio :label="1">{{
-            $t("ReportManage.ReportList.new_report_radio")
-          }}</el-radio>
-          <el-radio :label="2">{{
-            $t("ReportManage.ReportList.inherit_report_radio")
-          }}</el-radio>
-        </el-radio-group>
-      </el-form-item>
+      <el-form
+        :model="formData"
+        :rules="rules"
+        ref="baseinfoForm"
+        class="baseinfo-form-wrap"
+        label-width="125px"
+      >
+        <el-form-item prop="type" :label="$t('ReportManage.ReportList.label_add_way')">
+          <el-radio-group
+            v-model="formData.type"
+            :disabled="id"
+            @change="handleUpdateBaseInfo"
+          >
+            <el-radio :label="1">{{
+              $t("ReportManage.ReportList.new_report_radio")
+            }}</el-radio>
+            <el-radio :label="2">{{
+              $t("ReportManage.ReportList.inherit_report_radio")
+            }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
 
-      <el-form-item prop="title" :label="$t('ReportManage.ReportList.label_report_tit')">
-        <el-input
-          :placeholder="$t('ReportManage.ReportList.input_title_please')"
-          v-model="formData.title"
-          style="width: 350px"
-        ></el-input>
-        
-        <el-button type="text" v-if="formData.type===2"><!-- 选择继承报告 -->{{$t('ReportManage.ReportList.choose_inherit_report')}}</el-button>
-      </el-form-item>
+        <el-form-item prop="title" :label="$t('ReportManage.ReportList.label_report_tit')">
+          <el-input
+            :placeholder="$t('ReportManage.ReportList.input_title_please')"
+            v-model="formData.title"
+            style="width: 350px"
+          >
+          </el-input>
+          
+          <el-button type="text" v-if="formData.type===2"><!-- 选择继承报告 -->{{$t('ReportManage.ReportList.choose_inherit_report')}}</el-button>
+        </el-form-item>
 
-      <el-form-item prop="classify" :label="$t('ReportManage.ReportList.label_report_classify')">
-        <el-cascader
-          ref="cascader"
-          :options="classifyArr"
-          v-model="formData.classify"
-          :placeholder="$t('ReportManage.ReportList.please_select_category')"
-          size="medium"
-          style="width: 350px"
-          @change="handleUpdateBaseInfo"
-        />
-      </el-form-item>
+        <el-form-item prop="classify" :label="$t('ReportManage.ReportList.label_report_classify')">
+          <el-cascader
+            ref="cascader"
+            :options="classifyArr"
+            v-model="formData.classify"
+            :placeholder="$t('ReportManage.ReportList.please_select_category')"
+            size="medium"
+            style="width: 350px"
+            @change="handleUpdateBaseInfo"
+          />
+        </el-form-item>
 
-      <el-form-item prop="relationVariety" :label="$t('ReportManage.ReportList.label_relation_variety')" v-if="formData.relationVariety.length">
-        <div>
-          <el-tag v-for="item in formData.relationVariety" :key="item"></el-tag>
-        </div>
-      </el-form-item>
-      
-      <el-form-item prop="abstract" :label="$t('ReportManage.ReportList.label_report_abstract')">
-        <el-input
-          type="textarea"
-          :placeholder="$t('ReportManage.ReportList.please_input_abstract')"
-          v-model="formData.abstract"
-          style="width: 350px"
-        ></el-input>
-      </el-form-item>
+        <el-form-item prop="relationVariety" :label="$t('ReportManage.ReportList.label_relation_variety')" v-if="formData.relationVariety.length">
+          <div>
+            <el-tag v-for="item in formData.relationVariety" :key="item"></el-tag>
+          </div>
+        </el-form-item>
+        
+        <el-form-item prop="abstract" :label="$t('ReportManage.ReportList.label_report_abstract')">
+          <el-input
+            type="textarea"
+            :placeholder="$t('ReportManage.ReportList.please_input_abstract')"
+            v-model="formData.abstract"
+            style="width: 350px"
+          ></el-input>
+        </el-form-item>
 
-      <el-form-item prop="author" :label="$t('ReportManage.ReportList.label_report_author')">
-        <el-select
-          v-model="formData.author"
-          multiple
-          :placeholder="$t('ReportManage.ReportList.please_select_author')"
-          size="medium"
-          style="width: 350px"
-        >
-          <el-option
-            v-for="(item, i) in authorlist"
-            :key="i"
-            :label="item.ReportAuthor"
-            :value="item.ReportAuthor"
-          ></el-option>
-        </el-select>
-      </el-form-item>
+        <el-form-item prop="author" :label="$t('ReportManage.ReportList.label_report_author')">
+          <el-select
+            v-model="formData.author"
+            multiple
+            :placeholder="$t('ReportManage.ReportList.please_select_author')"
+            size="medium"
+            style="width: 350px"
+          >
+            <el-option
+              v-for="(item, i) in authorlist"
+              :key="i"
+              :label="item.ReportAuthor"
+              :value="item.ReportAuthor"
+            ></el-option>
+          </el-select>
+        </el-form-item>
 
-      <el-form-item prop="frequency" :label="$t('ReportManage.ReportList.label_frequency')">
-        <el-select
-          v-model="formData.frequency"
-          :placeholder="$t('ReportManage.ReportList.please_select_frequency')"
-          size="medium"
-          style="width: 350px"
-        >
-          <el-option 
-            v-for="item in reportFrequencyOption" 
-            :key="item.value"
-            :label="item.label" 
-            :value="item.value"
-          ></el-option>
-        </el-select>
-      </el-form-item>
+        <el-form-item prop="frequency" :label="$t('ReportManage.ReportList.label_frequency')">
+          <el-select
+            v-model="formData.frequency"
+            :placeholder="$t('ReportManage.ReportList.please_select_frequency')"
+            size="medium"
+            style="width: 350px"
+          >
+            <el-option 
+              v-for="item in reportFrequencyOption" 
+              :key="item.value"
+              :label="item.label" 
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
 
-      <el-form-item prop="time" :label="$t('ReportManage.ReportList.label_createtime')">
-        <el-date-picker
-          v-model="formData.time"
-          type="date"
-          value-format="yyyy-MM-dd"
-          :placeholder="$t('ReportManage.ReportList.please_select_date')"
-          size="medium"
-          :clearable="false"
-          style="width: 350px"
-        ></el-date-picker>
-      </el-form-item>
+        <el-form-item prop="time" :label="$t('ReportManage.ReportList.label_createtime')">
+          <el-date-picker
+            v-model="formData.time"
+            type="date"
+            value-format="yyyy-MM-dd"
+            :placeholder="$t('ReportManage.ReportList.please_select_date')"
+            size="medium"
+            :clearable="false"
+            style="width: 350px"
+          ></el-date-picker>
+        </el-form-item>
 
-      <el-form-item prop="cooperationType" :label="$t('ReportManage.ReportList.label_coop')">
-        <el-radio-group
-          v-model="formData.cooperationType"
-          :disabled="id"
-          @change="handleUpdateBaseInfo"
-        >
-          <el-radio :label="1"><!-- 个人 -->{{$t('ReportManage.ReportList.coop_own')}}</el-radio>
-          <el-radio :label="2"><!-- 多人协作 -->{{$t('ReportManage.ReportList.coop_more')}}</el-radio>
-        </el-radio-group>
+        <el-form-item prop="cooperationType" :label="$t('ReportManage.ReportList.label_coop')">
+          <el-radio-group
+            v-model="formData.cooperationType"
+            :disabled="id"
+            @change="handleUpdateBaseInfo"
+          >
+            <el-radio :label="1"><!-- 个人 -->{{$t('ReportManage.ReportList.coop_own')}}</el-radio>
+            <el-radio :label="2"><!-- 多人协作 -->{{$t('ReportManage.ReportList.coop_more')}}</el-radio>
+          </el-radio-group>
 
-        <el-button 
-          type="text" 
-          v-if="formData.cooperationType===2"
-          style="margin-left: 20px"
-        ><!-- 选择协作人 -->{{$t('ReportManage.ReportList.choose_cooper')}}</el-button>
-      </el-form-item>
-      <el-form-item prop="reportLayout" :label="$t('ReportManage.ReportList.label_report_layout')">
-        <el-radio-group
-          v-model="formData.reportLayout"
-          :disabled="id"
-          @change="handleUpdateBaseInfo"
-        >
-          <el-radio :label="1"><!-- 常规布局 -->{{$t('ReportManage.ReportList.layout_default')}}</el-radio>
-          <el-radio :label="2"><!-- 智能布局 -->{{$t('ReportManage.ReportList.layout_smart')}}</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item prop="isPublcPublish">
-        <template slot="label">
-          <span><!-- 公开发布 -->{{$t('ReportManage.ReportList.label_public')}}</span>
-          <el-tooltip class="item" effect="dark" placement="top">
-            <div slot="content" v-html="publishTip"></div>
-            <i class="el-icon-info"/>
-          </el-tooltip>
-        </template>
+          <el-button 
+            type="text" 
+            v-if="formData.cooperationType===2"
+            style="margin-left: 20px"
+            @click="handleChooseCooper"
+          ><!-- 选择协作人 -->{{$t('ReportManage.ReportList.choose_cooper')}}</el-button>
+        </el-form-item>
+        <el-form-item prop="reportLayout" :label="$t('ReportManage.ReportList.label_report_layout')">
+          <el-radio-group
+            v-model="formData.reportLayout"
+            :disabled="id"
+            @change="handleUpdateBaseInfo"
+          >
+            <el-radio :label="1"><!-- 常规布局 -->{{$t('ReportManage.ReportList.layout_default')}}</el-radio>
+            <el-radio :label="2"><!-- 智能布局 -->{{$t('ReportManage.ReportList.layout_smart')}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item prop="isPublcPublish">
+          <template slot="label">
+            <span><!-- 公开发布 -->{{$t('ReportManage.ReportList.label_public')}}</span>
+            <el-tooltip class="item" effect="dark" placement="top">
+              <div slot="content" v-html="publishTip"></div>
+              <i class="el-icon-info"/>
+            </el-tooltip>
+          </template>
+
+          <el-radio-group
+            v-model="formData.isPublcPublish"
+            :disabled="id"
+            @change="handleUpdateBaseInfo"
+          >
+            <el-radio :label="true">{{$t('Common.yes_text')}}</el-radio>
+            <el-radio :label="false">{{$t('Common.no_text')}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
 
-        <el-radio-group
-          v-model="formData.isPublcPublish"
-          :disabled="id"
-          @change="handleUpdateBaseInfo"
+      </el-form>
+      <div style="text-align: center; margin-top: 60px; margin-bottom: 40px">
+        <el-button
+          type="primary"
+          plain
+          style="width: 120px"
+          @click="handleClose"
+          >{{ $t("Dialog.cancel_btn") }}</el-button
         >
-          <el-radio :label="true">{{$t('Common.yes_text')}}</el-radio>
-          <el-radio :label="false">{{$t('Common.no_text')}}</el-radio>
-        </el-radio-group>
-      </el-form-item>
+        <el-button type="primary" style="width: 120px" @click="handleConfirm">{{
+          $t("Dialog.confirm_btn")
+        }}</el-button>
+      </div>
+    </el-dialog>
 
-    </el-form>
-    <div style="text-align: center; margin-top: 60px; margin-bottom: 40px">
-      <el-button
-        type="primary"
-        plain
-        style="width: 120px"
-        @click="handleClose"
-        >{{ $t("Dialog.cancel_btn") }}</el-button
-      >
-      <el-button type="primary" style="width: 120px" @click="handleConfirm">{{
-        $t("Dialog.confirm_btn")
-      }}</el-button>
-    </div>
-  </el-dialog>
+    <!-- 选择协作人弹窗 -->
+    <chooseCooperaUserDia
+      :isShow.sync="isChooseCooperaUser"
+      :users="formData.cooperationUsers"
+    />
+  </div>
 </template>
 
 <script>
 import { apiSmartReport } from "@/api/modules/smartReport";
 import { reportFrequencyOption } from '../common/constants';
+import chooseCooperaUserDia from './chooseCooperaUserDia.vue';
 export default {
   name: "BaseInfo",
+  components: {chooseCooperaUserDia},
   model: {
     prop: "show",
     event: "showChange",
@@ -235,6 +247,7 @@ export default {
         frequency: "日度",
         time: this.$moment().format("YYYY-MM-DD") || "",
         cooperationType: 1,//协作方式
+        cooperationUsers: [],
         reportLayout: 1,//报告布局
         isPublcPublish: true
       },
@@ -380,6 +393,11 @@ export default {
         });
     },
 
+    //选择协作人
+    handleChooseCooper() {
+      this.isChooseCooperaUser = true
+    },
+
     // 获取选择的分类名称
     getSelectClassifyName() {
       let arr = [];

src/views/report_manage/reportV2/list.vue

@@ -108,14 +108,17 @@
             </el-form-item>
           </el-form>
           
-          <ul class="report-types-cont">
-            <li 
-              v-for="item in reportTypes" 
+          <el-radio-group 
+            v-model="searchform.listType" 
+            @input="filterChange"
+            class="report-types-cont"
+          >
+            <el-radio-button 
+              :label="item.key"  
+              v-for="item in reportTypes"
               :key="item.key" 
-              :class="{'act':item.key===searchform.listType}"
-              @click="searchform.listType=item.key"
-            >{{item.label}}</li>
-          </ul>
+            >{{item.label}}</el-radio-button>
+          </el-radio-group>
         </div>
         
         <el-table
@@ -1248,18 +1251,7 @@ export default {
   }
 
   .report-types-cont {
-    display: flex;
-    align-items: center;
-    gap: 0 15px;
-    margin-bottom: 15px;
-    li {
-      padding: 10px 20px;
-      border-radius: 4px;
-      &.act {
-        color: #fff;
-        background: #0052D9;
-      }
-    }
+    margin-bottom: 20px;
   }
 }
 </style>