• 实习项目总结-Pandroid仿真数据管理平台

    目录

    一. 主页

    (一). 实现功能

    主页配置：

    我的数据：

    (二). 实现效果

    1.主页配置

    1.1主页配置弹窗

    1.2拖拽排序

    1.3模块订阅

    1.4列数更改

    1.5重置订阅

    2.我的数据

    2.1主页数据展示

    2.2查看全部跳转

    2.3主页链接跳转

    2.4查看全部链接跳转

    2.5echarts展示数据

    (二). 实现代码

    1.主页+订阅弹窗页面

    2.订阅模块

    点击查看订阅模块实现代码

    3.订阅模块配置文件

    4.查看全部(组件复用)

    二. 更改所有者

    (一)实现功能

    (二)实现效果

     (三)实现代码

    1.dialog

    2.code值

    3.按钮

    一. 主页

    (一). 实现功能

    主页配置：

    动态更改订阅模块的顺序、显示。

    数据库添加字段，设置部分模块重置效果。

    我的数据：

    根据用户需求选择各个模块配置。存在配置文件。根据用户需求动态化设计。

    模块数据部分展示，展示前十条。

    模块位置动态展示。

    模块内容关键字跳转。

    查看全部按钮，展示全部数据。

    (二). 实现效果

    1.主页配置

    1.1主页配置弹窗

    1.2拖拽排序

    1.3模块订阅

    1.4列数更改

    1.5重置订阅

    2.我的数据

    2.1主页数据展示

    2.2查看全部跳转

    2.3主页链接跳转

    2.4查看全部链接跳转

    2.5echarts展示数据

    (二). 实现代码

    1.主页+订阅弹窗页面

    dashboard文件夹=>index.vue

    1. <template>
    2.   <div class="dashboard-container firstPage">
    3.     <div class="dashboard-text">
    4.       <el-card style="min-height: calc(100vh - 120px)">
    5.         <div slot="header" class="card-title">
    6.           <span>我的数据span>
    7.           <el-button type="primary" @click="showSubscribe" style="float: right"
    8.             >主页配置
    9.           >
    10.         div>
    11.         <el-row :gutter="15" v-loading="pageLoading">
    12.           <el-col
    13.             :span="24 / subscribe.layoutCols"
    14.             class="dataBox align-center"
    15.             v-for="item in subscribe.sortedItems"
    16.             :key="item.name"
    17.           >
    18.             <component
    19.               :is="item.name"
    20.               :user="user"
    21.               :colNum="subscribe.layoutCols"
    22.             >
    23.             component>
    24.           el-col>
    25.         el-row>
    26.       el-card>
    27.     div>
    28.  
    29.     
    30.     <el-dialog
    31.       title="主页配置"
    32.       :visible.sync="subscribe.show"
    33.       width="40%"
    34.       :before-close="closedia"
    35.       class="a1"
    36.     >
    37.       <el-form style="height:600px,overflow:hidden">
    38.         <el-form-item label="布局列数:">
    39.           <el-select v-model="subscribe.colNum" placeholder="请选择布局列数">
    40.             <el-option label="2列" value="2"> el-option>
    41.             <el-option label="3列" value="3"> el-option>
    42.             <el-option label="4列" value="4"> el-option>
    43.           el-select>
    44.         el-form-item>
    45.         <el-form-item label="订阅模块:">
    46.           <div class="drags">
    47.             <div
    48.               class="item"
    49.               :class="'item' + subscribe.colNum"
    50.               v-for="(item, index) in subscribe.items"
    51.               :key="item + index + 'key'"
    52.               draggable
    53.               @dragstart="startDrag($event, item)"
    54.               @dragover.prevent="handDragOver($event, item)"
    55.               @dragenter="handDragEnter($event, item)"
    56.               @dragend="endDrag($event, item)"
    57.               :style="{ background: item.color }"
    58.               :ref="item.color"
    59.             >
    60.               <div class="bc">
    61.                 <div class="item-title">{{ item.cname }}div>
    62.                 <el-switch
    63.                   v-model="item.subscribed"
    64.                   inactive-color="#ff4949"
    65.                   active-text="订阅"
    66.                   inactive-text="取消"
    67.                 >
    68.                 el-switch>
    69.               div>
    70.             div>
    71.           div>
    72.         el-form-item>
    73.       el-form>
    74.       <span slot="footer" class="dialog-footer">
    75.         <el-button type="success" @click="updateConfigurationListByRole"
    76.           >重 置
    77.         >
    78.         <el-button type="primary" @click="updateUserConfiguration"
    79.           >确 定
    80.         >
    81.       span>
    82.     el-dialog>
    83.   div>
    84. template>
    85.  
    86. <script>
    87. import { mapGetters, mapState } from "vuex";
    88. import MyCounts from "./components/statisticsAnalysis/myCount";
    89. import FileCount from "./components/statisticsAnalysis/fileCount";
    90. import MyMessages from "./components/statisticsAnalysis/MyMsgs";
    91. import MyAssigns from "./components/statisticsAnalysis/TaskCount";
    92. import MyDataStatistics from "./components/statisticsAnalysis/dataCount";
    93. import MyOperations from "./components/statisticsAnalysis/myOperates";
    94. import MyTools from "./components/statisticsAnalysis/toolsRunning";
    95.  
    96. import MyProjects from "./components/myDatas/myProjects";
    97. import MyItems from "./components/myDatas/myAnalysisTargets";
    98. import MyVersions from "./components/myDatas/myVersions";
    99. import MyModels from "./components/myDatas/myModels";
    100. import MySolvingFiles from "./components/myDatas/mySolvingFiles";
    101. import MyReports from "./components/myDatas/myReports";
    102. import MyResults from "./components/myDatas/myReuslts";
    103. import MyAllKeyResults from "./components/myDatas/myAllKeyResult";
    104. import MyToDoTaskNode from "./components/myDatas/myToDoTaskNode";
    105. import MyApproval from "./components/myDatas/myApply";
    106. import MyTasks from "./components/myDatas/myWork";
    107. import MyCreateTask from "./components/myDatas/myCreateTask";
    108. import MyPersonInfo from "./components/myDatas/myPersonInfo";
    109.  
    110. import { getUserConfiguration } from "@/api/statistics";
    111. import { getAllConfiguration } from "@/api/statistics";
    112. import { updateUserConfiguration } from "@/api/statistics";
    113. import { findConfigurationListByRole } from "@/api/statistics";
    114.  
    115. export default {
    116.   name: "Dashboard",
    117.   computed: {
    118.     ...mapGetters(["name"]),
    119.     ...mapState({
    120.       user: (state) => state.user.user,
    121.     }),
    122.   },
    123.   components: {
    124.     // CountTo,
    125.     MyCounts,
    126.     FileCount,
    127.     MyMessages,
    128.     MyAssigns,
    129.     MyDataStatistics,
    130.     MyOperations,
    131.     MyTools,
    132.  
    133.     MyProjects,
    134.     MyItems,
    135.     MyVersions,
    136.     MyModels,
    137.     MySolvingFiles,
    138.     MyReports,
    139.     MyResults,
    140.     MyAllKeyResults,
    141.     MyToDoTaskNode,
    142.     MyTasks,
    143.     MyCreateTask,
    144.     MyApproval,
    145.     MyPersonInfo,
    146.   },
    147.   data() {
    148.     return {
    149.       pageLoading: false,
    150.       subscribe: {
    151.         colNum: 3,
    152.         layoutCols: 3,
    153.         objectid: "",
    154.         show: false,
    155.         ending: null,
    156.         dragging: null,
    157.         items: [],
    158.         sortedItems: [],
    159.         cacheItems: [],
    160.         cacheCols: 3,
    161.       },
    162.       defaultConfig: {
    163.         column: 4,
    164.         default: [],
    165.       },
    166.       allConfig: [],
    167.     };
    168.   },
    169.  
    170.   methods: {
    171.     // 获取个人主页配置
    172.     getUserConfiguration() {
    173.       return getUserConfiguration();
    174.     },
    175.     // 获取全部主页配置
    176.     getAllConfiguration() {
    177.       return getAllConfiguration();
    178.     },
    179.     // 根据用户角色获取默认配置
    180.     findConfigurationListByRole() {
    181.       return findConfigurationListByRole();
    182.     },
    183.     async configuration() {
    184.       let UserConfiguration = await this.getUserConfiguration();
    185.       let AllConfiguration = await this.getAllConfiguration();
    186.       let DefaultConfiguration = await this.findConfigurationListByRole();
    187.       let userConfig = UserConfiguration.data;
    188.       let allConfig = AllConfiguration.data;
    189.       let defaultConfig = DefaultConfiguration.data;
    190.       console.log(userConfig);
    191.       console.log(allConfig);
    192.  
    193.       this.allConfig = JSON.parse(JSON.stringify(allConfig));
    194.       this.defaultConfig = defaultConfig;
    195.  
    196.       let subscribeid =
    197.         userConfig.subscribe.length != 0
    198.           ? userConfig.subscribe
    199.           : defaultConfig.default;
    200.  
    201.       var subed = [];
    202.       for (var item of subscribeid) {
    203.         for (var allItem of allConfig) {
    204.           if (allItem.objectid == item) {
    205.             allItem.subscribed = true;
    206.             subed.push(allItem);
    207.             break;
    208.             
    209.           }
    210.         }
    211.       }
    212.       var notSub = allConfig.filter((item) => {
    213.         if (!subscribeid.includes(item.objectid)) {
    214.           item.subscribed = false;
    215.           return item
    216.         }
    217.       });
    218.       var config = [...subed, ...notSub];
    219.       console.log(config);
    220.       // var config = allConfig.map((item) => {
    221.       //   item.subscribed = subscribeid.includes(item.objectid) ? true : false;
    222.       //   return item;
    223.       // });
    224.  
    225.       this.subscribe.items = JSON.parse(JSON.stringify(config));
    226.       console.log(this.subscribe.items);
    227.       this.subscribe.colNum =
    228.         userConfig.column.length != 0
    229.           ? userConfig.column
    230.           : defaultConfig.column;
    231.  
    232.       // this.subscribe.objectid = userconfig.objectid;
    233.       this.sortConfirm();
    234.       this.pageLoading = false;
    235.     },
    236.     // 更新个人主页
    237.     updateUserConfiguration() {
    238.       var user = JSON.parse(localStorage.getItem("user")); //数组对象
    239.       let userId = user.objectid;
    240.       var subids = [];
    241.       for (var item of this.subscribe.items) {
    242.         if (item.subscribed == true) {
    243.           subids.push(item.objectid);
    244.         }
    245.       }
    246.  
    247.       let data = {
    248.         user: userId,
    249.         column: this.subscribe.colNum,
    250.         subscribeList: subids,
    251.       };
    252.       updateUserConfiguration(data).then((res) => {
    253.         if (res) {
    254.           console.log(res);
    255.           this.sortConfirm();
    256.         }
    257.       });
    258.     },
    259.     // 根据用户角色获取默认配置
    260.     updateConfigurationListByRole() {
    261.       let arr = this.allConfig.map((item) => {
    262.         item.subscribed = this.defaultConfig.default.includes(item.objectid)
    263.           ? true
    264.           : false;
    265.         return item;
    266.       });
    267.       this.subscribe.items = JSON.parse(JSON.stringify(arr));
    268.       this.subscribe.colNum = this.defaultConfig.column;
    269.     },
    270.     startDrag(e, item) {
    271.       console.log(e, item);
    272.       this.subscribe.dragging = item;
    273.       console.log(this.$refs[item.color]);
    274.     },
    275.     handDragOver(e, item) {
    276.       console.log(e, item);
    277.       e.dataTransfer.dropEffect = "move";
    278.     },
    279.     handDragEnter(e, item) {
    280.       console.log(e, item);
    281.       e.dataTransfer.effectAllowed = "move";
    282.       this.subscribe.ending = item;
    283.     },
    284.     endDrag(e, item) {
    285.       console.log(e, item);
    286.       if (this.subscribe.ending.name === this.subscribe.dragging.name) {
    287.         return;
    288.       }
    289.       let newItems = [...this.subscribe.items];
    290.       const src = newItems.indexOf(this.subscribe.dragging);
    291.       const dst = newItems.indexOf(this.subscribe.ending);
    292.  
    293.       newItems.splice(src, 1);
    294.       newItems.splice(dst, 0, this.subscribe.dragging);
    295.       this.subscribe.items = newItems;
    296.       this.$nextTick(() => {
    297.         this.subscribe.dragging = null;
    298.         this.subscribe.ending = null;
    299.       });
    300.     },
    301.     showSubscribe() {
    302.       this.subscribe.show = true;
    303.     },
    304.     sortConfirm() {
    305.       this.subscribe.sortedItems = this.subscribe.items.filter((v) => {
    306.         return v.subscribed;
    307.       });
    308.       this.subscribe.layoutCols = this.subscribe.colNum;
    309.       this.subscribe.cacheItems = this.subscribe.items;
    310.       this.subscribe.cacheCols = this.subscribe.colNum;
    311.       this.subscribe.show = false;
    312.     },
    313.     closedia(done) {
    314.       this.subscribe.items = this.subscribe.cacheItems;
    315.       this.subscribe.colNum = this.subscribe.cacheCols;
    316.       if (done) {
    317.         done();
    318.       }
    319.     },
    320.   },
    321.   created() {
    322.     this.pageLoading = true;
    323.     this.configuration();
    324.   },
    325.   mounted() {},
    326. };
    327. script>
    328.  
    329. <style lang="scss" scoped>
    330. .a1{
    331.   height: 100%;
    332.   ::v-deep .el-dialog__body{
    333.     height: 40rem;
    334.     overflow: auto;
    335.   }
    336. }
    337. .dashboard {
    338.   &-container {
    339.     margin: 30px;
    340.   }
    341. }
    342. .firstPage {
    343.   .card-title {
    344.     font-size: 20px;
    345.     font-weight: bold;
    346.   }
    347.   ::v-deep .dataBox {
    348.     height: calc(50vh - 150px);
    349.     margin-bottom: 15px;
    350.     .border-box {
    351.       border: 1px solid #eef;
    352.       border-radius: 5px;
    353.       height: calc(50vh - 150px);
    354.       box-sizing: border-box;
    355.       padding: 15px 0;
    356.     }
    357.     #smChart {
    358.       height: 100px;
    359.       width: 200px;
    360.     }
    361.     .readBox {
    362.       line-height: 28px;
    363.     }
    364.     .card-sub-title {
    365.       font-size: 18px;
    366.       font-weight: bold;
    367.       line-height: 20px;
    368.       .messageIcon {
    369.         color: #409eff;
    370.         font-size: 18px;
    371.         display: inline-block;
    372.         vertical-align: middle;
    373.         margin: 0 5px;
    374.       }
    375.       .messageNum {
    376.         display: inline-block;
    377.         vertical-align: middle;
    378.         font-size: 14px;
    379.         color: #679;
    380.         margin: 0 5px;
    381.       }
    382.     }
    383.     .chartTitle {
    384.       font-size: 18px;
    385.       font-weight: bold;
    386.       padding-left: 15px;
    387.     }
    388.     .middleChartBox {
    389.       height: 300px;
    390.     }
    391.     .chartBox {
    392.       height: 300px;
    393.     }
    394.     .label {
    395.       color: #999;
    396.     }
    397.     .bo {
    398.       font-size: 30px;
    399.     }
    400.     .card-panel-num {
    401.       font-size: 40px;
    402.       line-height: 200px;
    403.     }
    404.   }
    405.  
    406.   ::v-deep .drags {
    407.     display: flex;
    408.     flex-wrap: wrap;
    409.     .item {
    410.       height: 100px;
    411.       // width: 200px;
    412.       // background: #f5f9ff;
    413.       margin-right: 20px;
    414.       margin-bottom: 20px;
    415.       text-align: center;
    416.       .bc {
    417.         width: calc(100% -20px);
    418.         background: #f5f9ff;
    419.       }
    420.       .item-title {
    421.         line-height: 60px;
    422.       }
    423.       &.item2 {
    424.         width: calc(50% - 20px);
    425.       }
    426.       &.item3 {
    427.         width: calc(33% - 20px);
    428.       }
    429.       &.item4 {
    430.         width: calc(25% - 20px);
    431.       }
    432.     }
    433.  
    434.     .el-switch__label--left {
    435.       &.is-active {
    436.         color: #ff4949;
    437.       }
    438.     }
    439.     .el-switch__label--right.is-active {
    440.       &.is-active {
    441.         color: #1890ff;
    442.       }
    443.     }
    444.   }
    445. }
    446. style>

    2.订阅模块

    点击查看订阅模块实现代码

    3.订阅模块配置文件

    1. {
    2.     "myAllKeyResult": {
    3.         "label": [
    4.             "名称",
    5.             "性能结果类型",
    6.             "创建者",
    7.             "所有者",
    8.             "创建时间",
    9.             "结果",
    10.             "描述"
    11.         ]
    12.     },
    13.     "myAnalysisTargets": {
    14.         "label": [
    15.             "对象名称",
    16.             "项目",
    17.             "分析对象定义",
    18.             "上层分析对象",
    19.             "创建者",
    20.             "所有者",
    21.             "创建时间",
    22.             "描述"
    23.         ]
    24.     },
    25.     "myApply": {
    26.         "label": [
    27.             "名称",
    28.             "审批对象名称",
    29.             "类型",
    30.             "申请时间",
    31.             "状态"
    32.         ]
    33.     },
    34.     "myCreateTask": {
    35.         "label": [
    36.             "任务名称",
    37.             "项目",
    38.             "版本",
    39.             "阶段",
    40.             "类型",
    41.             "上层任务",
    42.             "任务负责人",
    43.             "创建时间",
    44.             "任务状态"
    45.         ]
    46.     },
    47.     "myModels": {
    48.         "label": [
    49.             "模型名称",
    50.             "版本方案",
    51.             "项目",
    52.             "分析对象",
    53.             "阶段",
    54.             "模型定义",
    55.             "模型实例类型",
    56.             "上层模型",
    57.             "格式",
    58.             "密级",
    59.             "创建者",
    60.             "所有者",
    61.             "创建时间",
    62.             "描述"
    63.         ]
    64.     },
    65.     "myProjects": {
    66.         "label": [
    67.             "项目名称",
    68.             "项目长名",
    69.             "项目类型",
    70.             "上层项目",
    71.             "创建者",
    72.             "所有者",
    73.             "创建时间",
    74.             "项目状态",
    75.             "描述"
    76.         ]
    77.     },
    78.     "myReports": {
    79.         "label": [
    80.             "名称",
    81.             "项目",
    82.             "关联数据",
    83.             "密级",
    84.             "报告类型",
    85.             "创建者",
    86.             "所有者",
    87.             "创建时间",
    88.             "描述"
    89.         ]
    90.     },
    91.     "myReuslts": {
    92.         "label": [
    93.             "名称",
    94.             "项目",
    95.             "分析对象",
    96.             "版本",
    97.             "模型定义",
    98.             "结果类型",
    99.             "分析类型",
    100.             "计算文件",
    101.             "格式",
    102.             "研制阶段",
    103.             "创建者",
    104.             "所有者",
    105.             "创建时间",
    106.             "结果描述"
    107.         ]
    108.     },
    109.     "mySolvingFiles": {
    110.         "label": [
    111.             "模型名称",
    112.             "项目",
    113.             "分析对象",
    114.             "版本方案",
    115.             "模型实例类型",
    116.             "模型定义",
    117.             "分析类型",
    118.             "分析工具",
    119.             "格式",
    120.             "密级",
    121.             "阶段",
    122.             "创建者",
    123.             "所有者",
    124.             "创建时间",
    125.             "描述"
    126.         ]
    127.     },
    128.     "myToDoTaskNode": {
    129.         "label": [
    130.             "名称",
    131.             "审批对象名称",
    132.             "申请人",
    133.             "类型",
    134.             "申请时间"
    135.         ]
    136.     },
    137.     "myVersions": {
    138.         "label": [
    139.             "版本名称",
    140.             "分析对象",
    141.             "项目",
    142.             "分析对象定义",
    143.             "版本方案定义",
    144.             "上层版本方案",
    145.             "阶段",
    146.             "创建者",
    147.             "所有者",
    148.             "创建时间",
    149.             "描述"
    150.         ]
    151.     },
    152.     "myWork": {
    153.         "label": [
    154.             "任务名称",
    155.             "项目",
    156.             "版本",
    157.             "阶段",
    158.             "类型",
    159.             "上层任务",
    160.             "任务负责人",
    161.             "创建时间",
    162.             "任务状态"
    163.         ]
    164.     }
    165. }

    4.查看全部(组件复用)

    myDatasList文件夹=>index.vue

    1. <template>
    2.   <div class="dashboard-container firstPage">
    3.     <div class="dashboard-text">
    4.       <el-card class="box-card" style="min-height: calc(100vh - 80px)">
    5.         <div slot="header" class="clearfix">
    6.           <span>{{$route.query.title}}span>
    7.         div>
    8.         
    9.         <myProjects :page='currentPage' :pagesize="pagesize" @retotal="totalChange" v-if=" $route.query.title === '我的项目' ">myProjects>
    10.         
    11.         <myItems :page='currentPage' :pagesize="pagesize" @retotal="totalChange" v-if=" $route.query.title === '我的分析对象' ">myItems>
    12.         
    13.         <myVersions :page='currentPage' :pagesize="pagesize" @retotal="totalChange" v-if=" $route.query.title === '我的版本方案' ">myVersions>
    14.         
    15.         <myModels :page='currentPage' :pagesize="pagesize" @retotal="totalChange" v-if=" $route.query.title==='我的模型'">myModels>
    16.         
    17.         <mySolvingFiles :page='currentPage' :pagesize="pagesize" @retotal="totalChange" v-if=" $route.query.title === '我的求解文件'" >mySolvingFiles>
    18.         
    19.         <myReports :page='currentPage' :pagesize="pagesize" @retotal="totalChange" v-if=" $route.query.title === '我的分析报告' ">myReports>
    20.         
    21.         <myResults :page='currentPage' :pagesize="pagesize" @retotal="totalChange" v-if=" $route.query.title === '我的仿真结果'" >myResults>
    22.         
    23.         <myAllKeyResults :page='currentPage' :pagesize="pagesize" @retotal="totalChange" v-if=" $route.query.title === '我的性能结果' ">myAllKeyResults>
    24.         
    25.         <myTasks :page='currentPage' :pagesize="pagesize" @retotal="totalChange" v-if=" $route.query.title === '我的任务' ">myTasks>
    26.         
    27.         <myCreateTask :page='currentPage' :pagesize="pagesize" @retotal="totalChange" v-if=" $route.query.title === '我创建的任务' ">myCreateTask>
    28.         
    29.         <myApproval :page='currentPage' :pagesize="pagesize" @retotal="totalChange" v-if=" $route.query.title === '我的审批申请' ">myApproval>
    30.         
    31.         <myToDoTaskNode :page='currentPage' :pagesize="pagesize" @retotal="totalChange" v-if=" $route.query.title === '我的代办审批'">myToDoTaskNode>
    32.         <div class="mt15" style="text-align: right">
    33.           <el-pagination
    34.             @size-change="handleSizeChange"
    35.             @current-change="handleCurrentChange"
    36.             :current-page="currentPage"
    37.             :page-sizes="[10, 20, 30, 40]"
    38.             :page-size="pagesize"
    39.             layout="total, prev, pager, next, sizes, jumper"
    40.             :total="total"
    41.           >
    42.           el-pagination>
    43.         div>
    44.       el-card>
    45.     div>
    46.   div>
    47. template>
    48. <script>
    49. import MyProjects from "../dashboard/components/myDatas/myProjects";
    50. import MyItems from "../dashboard/components/myDatas/myAnalysisTargets";
    51. import MyVersions from "../dashboard/components/myDatas/myVersions";
    52. import MyModels from "../dashboard/components/myDatas/myModels";
    53. import MySolvingFiles from "../dashboard/components/myDatas/mySolvingFiles";
    54. import MyReports from "../dashboard/components/myDatas/myReports";
    55. import MyResults from "../dashboard/components/myDatas/myReuslts";
    56. import MyAllKeyResults from "../dashboard/components/myDatas/myAllKeyResult";
    57. import MyToDoTaskNode from "../dashboard/components/myDatas/myToDoTaskNode";
    58. import MyApproval from "../dashboard/components/myDatas/myApply";
    59. import MyTasks from "../dashboard/components/myDatas/myWork";
    60. import MyCreateTask from "../dashboard/components/myDatas/myCreateTask";
    61.  
    62. export default {
    63.   name: "myDatasList",
    64.   components: {
    65.     MyProjects,
    66.     MyItems,
    67.     MyVersions,
    68.     MyModels,
    69.     MySolvingFiles,
    70.     MyReports,
    71.     MyResults,
    72.     MyAllKeyResults,
    73.     MyToDoTaskNode,
    74.     MyApproval,
    75.     MyTasks,
    76.     MyCreateTask,
    77.   },
    78.   data(){
    79.     return{
    80. 			currentPage:1,
    81. 			pagesize:10,
    82. 			total:0,
    83. 		}
    84.   },
    85.   methods:{
    86.     totalChange(val){
    87.       this.total  = val;
    88.       this.prev = val
    89.     },
    90.     handleSizeChange(val){
    91.       this.pagesize = val
    92.       this.$emit("add",this.page)
    93.       this.$emit("add",this.pagesize)
    94. 		},
    95.     handleCurrentChange(val){
    96. 			this.currentPage = val
    97. 		},
    98.   },
    99. };
    100. script>

    二. 更改所有者

    (一)实现功能

    校验登录用户身份，校验不同文件类型，更改所对应所有者。

    (二)实现效果

     (三)实现代码

    1.dialog

    1. <template>
    2.   <div class="updateOwner">
    3.     <el-dialog
    4.       title="更改所有者"
    5.       :visible.sync="value"
    6.       width="500px"
    7.       :before-close="handleClose"
    8.       :close-on-click-modal="false"
    9.       @close="handleAssignUserClose"
    10.     >
    11.       <el-form
    12.         :inline="true"
    13.         ref="assignUserForm"
    14.         :model="formInline"
    15.         class="demo-form-inline"
    16.       >
    17.         <el-form-item label="项目" required>
    18.           <el-cascader
    19.             v-model="formInline.project"
    20.             :options="projectData"
    21.             :props="projectProps"
    22.             placeholder="请选择项目"
    23.             clearable
    24.             :disabled="true"
    25.           >
    26.           el-cascader>
    27.         el-form-item>
    28.       el-form>
    29.       <div class="projectBox">
    30.         <el-tag style="margin: 2px" size="small">
    31.           {{ currentowner.name }}
    32.         el-tag>
    33.       div>
    34.       <el-table
    35.         :data="tableData"
    36.         border
    37.         style="width: 100%"
    38.         class="mt15"
    39.         size="mini"
    40.       >
    41.         <el-table-column prop="realName" label="用户名"> el-table-column>
    42.         
    43.         <el-table-column label="操作" width="100">
    44.           <template slot-scope="scope">
    45.             <el-button
    46.               type="text"
    47.               size="mini"
    48.               v-if="!(scope.row.userId==currentowner.id)"
    49.               @click="handleAdd(scope.row)"
    50.               >更改
    51.             >
    52.           template>
    53.         el-table-column>
    54.       el-table>
    55.       <div class="mt15 align-right clear">
    56.         <el-pagination
    57.           @current-change="handleCurrentChange"
    58.           :current-page.sync="currentPage"
    59.           :page-size="10"
    60.           layout="total, prev, pager, next, jumper"
    61.           :total="total"
    62.           size="mini"
    63.         >
    64.         el-pagination>
    65.       div>
    66.  
    67.       <span slot="footer" class="dialog-footer">
    68.         <el-button @click="handleAssignUserClose">取 消el-button>
    69.         <el-button type="primary" @click="assignProjectForUser"
    70.           >提 交
    71.         >
    72.       span>
    73.     el-dialog>
    74.   div>
    75. template>
    76.  
    77. <script>
    78. import { updateAuth } from '@/utils/statusCode'
    79. import { findAllRole } from "@/api/authorization/role";
    80. import { getUserListByPage } from "@/api/authorization/user";
    81. import request from "@/utils/request";
    82. import { mapState } from "vuex";
    83. export default {
    84.   name: "updateOwner",
    85.   computed: {
    86.     ...mapState({
    87.       user: (state) => state.user.user,
    88.     }),
    89.   },
    90.   props: {
    91.     value: {
    92.       type: Boolean,
    93.       default: false,
    94.       required: true,
    95.     },
    96.     projectData: {
    97.       type: Array,
    98.     },
    99.     updateAcObj: {
    100.       type: Object,
    101.     },
    102.     // ownerId: { type: String },
    103.   },
    104.   data() {
    105.     return {
    106.       projectProps: {
    107.         value: "objectid",
    108.         label: "name",
    109.         children: "children",
    110.         checkStrictly: true,
    111.       },
    112.       updateAuth,
    113.       tableData: [],
    114.       currentPage: 1,
    115.       total: 0,
    116.       formInline: {},
    117.       userList: [],
    118.       expirationDate: "",
    119.       roleList: [],
    120.       associatedUserList: [],
    121.       projectUserList: [],
    122.       currentowner: { name: "", id: "" },
    123.     };
    124.   },
    125.   methods: {
    126.     initForm(projectDetail) {
    127.       // debugger 
    128.       this.currentowner.id = this.updateAcObj.ownerId;
    129.  
    130.       this.formInline.project = projectDetail.objectid;
    131.       this.formInline.parentProject = projectDetail.parent;
    132.       this.getUsersByProjectId(this.formInline.project);
    133.       this.$emit("input", true);
    134.     },
    135.  
    136.     assignProjectForUser() {
    137.       let typeObj = {
    138.         project: 1,
    139.         item: 2,
    140.         version: 3,
    141.         model: 4,
    142.         inputDeck: 5,
    143.         result: 6,
    144.         report: 7,
    145.         imageResult: 9,
    146.         valueResult: 10,
    147.         docResult: 11,
    148.         movieResult: 12,
    149.         curveResult: 13, 
    150.         itemDef: 15,
    151.         versionDef: 16,
    152.         Scenario: 17,
    153.         modelDef: 18,
    154.         studyDoc:19,
    155.         studyDocTag:20
    156.       };
    157.       let data = {
    158.         objectId: this.updateAcObj.objectId,
    159.         type: typeObj[this.updateAcObj.type],
    160.         owner: this.currentowner.id,
    161.       };
    162.  
    163.       console.log(data);
    164.       request({
    165.         url: "/datamanager/updateAuth/updateOwner",
    166.         method: "get",
    167.         params: data,
    168.       })
    169.         .then((res) => {
    170.           this.$message.success("分配成功");
    171.           this.handleClose();
    172.           this.$emit("refreshBasic", {
    173.             owner: this.currentowner.name,
    174.             ownerId: this.currentowner.id,
    175.           });
    176.         })
    177.         .catch((err) => {
    178.           this.$message.error("请添加用户！");
    179.         });
    180.       return;
    181.     },
    182.     getUsersByProjectId(projectId) {
    183.       this.getUserListByPage();
    184.     },
    185.     handleAdd(row) {
    186.       // debugger
    187.       this.currentowner.name = row.realName;
    188.       this.currentowner.id = row.userId;
    189.     },
    190.  
    191.     handleCurrentChange(val) {
    192.       this.currentPage = val;
    193.       this.getUserListByPage();
    194.     },
    195.  
    196.     getUserListByPage() {
    197.       var self = this;
    198.       let data = {
    199.         start: this.currentPage,
    200.         limit: 10,
    201.         userRealName: this.formInline.userRealName || "",
    202.       };
    203.       getUserListByPage(data).then((res) => {
    204.         if (res) {
    205.           this.tableData = res.data.records;
    206.           for (let i = 0; i < this.tableData.length; i++) {
    207.             this.tableData[i].dis = false;
    208.             this.tableData[i].roleId = this.roleList[0].ownerid;
    209.             for (let j = 0; j < this.associatedUserList.length; j++) {
    210.               if (
    211.                 this.associatedUserList[j].objectid == this.tableData[i].userId
    212.               ) {
    213.                 this.tableData[i].transmit =
    214.                   this.associatedUserList[j].transmit;
    215.                 this.tableData[i].dis = true;
    216.                 this.tableData[i].roleId = this.associatedUserList[j].role;
    217.               }
    218.             }
    219.             this.tableData[i].realName =
    220.               "" + self.tableData[i].lastname + self.tableData[i].firstname;
    221.             if (this.tableData[i].userId === this.currentowner.id) {
    222.               this.currentowner.name = this.tableData[i].realName;
    223.             }
    224.           }
    225.           this.total = res.data.total;
    226.         }
    227.       });
    228.     },
    229.     findAllRole() {
    230.       findAllRole().then((res) => {
    231.         if (res) {
    232.           res.data.forEach((item) => {
    233.             if (item.type == 2) {
    234.               this.roleList.push(item);
    235.             }
    236.           });
    237.         }
    238.       });
    239.     },
    240.  
    241.     handleAssignUserClose() {
    242.       this.associatedUserList = [];
    243.       this.currentPage = 1;
    244.       this.formInline = {
    245.         realName: null,
    246.       };
    247.       this.$emit("input", false);
    248.     },
    249.     async handleClose(done) {
    250.       await this.$emit("input", false);
    251.       done();
    252.     },
    253.   },
    254.   created() {
    255.     this.findAllRole();
    256.  
    257.   },
    258. };
    259. script>
    260. <style lang="scss" scoped>
    261. .assignUser {
    262.   .label {
    263.     line-height: 40px;
    264.     width: 100px;
    265.   }
    266. }
    267. style>

    2.code值

    1. export var updateAuth = {
    2. 	"item": '202',//分析对象更改所有者' 
    3. 	"version": '205',//'版本方案更改所有者' 
    4. 	"model": '208',//:'模型更改所有者' 
    5. 	"inputDeck": '211',//:'计算文件更改所有者' 
    6. 	"result": '214',//:'结果更改所有者' 
    7. 	"keyResult": '217',//:'性能结果更改所有者' 
    8. 	"report": '220',//:'报告更改所有者' 
    9. 	"docTags":"223",//文档分类更改所有者 
    10. 	"docs":"226",//知识文档更改所有者 
    11. 	"project":"227",//项目更改所有者 
    12. 	"itemDef":"228",//对象定义更改所有者
    13. 	"versionDef":"229",//版本方案定义更改所有者 
    14. 	"modelDef":"230",//模型定义更改所有者 
    15. 	"scenario":"231",//分析类型更改所有者 
    16. }

    3.按钮

    1. <div class="fl btnItem" :class="{ disabled: editStatus }" @click="!editStatus ? updateOwner() : null"  v-if="updateAcObj.showBtn">
    2.     <svg-icon icon-class="user" class="btnIcon" />
    3.     <p>更改所有者p>
    4.     <i class="el-icon-setting smIcon">i>
    5. div>
    2.     <updateOwner
    3.       ref="updateOwner"
    4.       v-model="updateOwnerVisible"
    5.       :updateAcObj="updateAcObj"
    6.       :projectData="projectData"
    7.       @refreshBasic="updOwner"
    8.     >updateOwner>
    1. import updateOwner from "@/components/project/updateOwner";
    2. updateOwner() {
    3.       this.$refs.updateOwner.initForm(this.projectDetail);
    4.     },

  • 相关阅读:
    找实习之从0开始的后端学习日记【9.17】
    猿创征文｜docker本地仓库的搭建（简易可快速使用的本地仓库）
    Docker(1)
    宠物网页作业HTML 大一作业HTML宠物网页作业 web期末大作业HTML 动物网页作业HTML HTML制作宠物网页作业css
    2023 电赛 E 题 K210 方案
    java 调用合约使用nonce 可能会出现的问题
    ASCII 码、Unicode、UTF-8
    手把手教程6-2: F460把debug printf功能改到UART1
    校招/社招/秋招/春招求职指南
    C# - Opencv应用（2） 之矩阵Mat使用[矩阵创建、图像显示、像素读取与赋值]
  • 原文地址：https://blog.csdn.net/m0_65912225/article/details/126302211