From 9023a4471558807ae7f691c8981e0db7b284f371 Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Tue, 27 Sep 2022 18:49:26 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A5=BF=E6=B5=B7=E5=B2=B8=EF=BC=9A=E5=B7=B2?=
 =?UTF-8?q?=E5=8A=9E--=E5=A2=9E=E5=8A=A0=E5=8D=95=E5=85=B5=E6=97=A0?=
 =?UTF-8?q?=E4=BA=BA=E6=9C=BA=E8=AE=BE=E5=A4=87=E5=8E=86=E5=8F=B2=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/hasToDoTasks/deviceApproval.vue   | 171 ++++++++++
 .../hasToDoTasks/deviceApprovalDetail.vue     | 319 ++++++++++++++++++
 2 files changed, 490 insertions(+)
 create mode 100644 back/src/views/modules/hasToDoTasks/deviceApproval.vue
 create mode 100644 back/src/views/modules/hasToDoTasks/deviceApprovalDetail.vue

diff --git a/back/src/views/modules/hasToDoTasks/deviceApproval.vue b/back/src/views/modules/hasToDoTasks/deviceApproval.vue
new file mode 100644
index 00000000..9f71809e
--- /dev/null
+++ b/back/src/views/modules/hasToDoTasks/deviceApproval.vue
@@ -0,0 +1,171 @@
+<!--
+ * @Author: hisense.guoyue
+ * @LastEditors: hisense.guoyue
+ * @LastEditTime: 2022-09-27 14:23:29
+ * @Description: 设备审批
+-->
+<template>
+    <el-card shadow="never" class="aui-card--fill" style="position:relative">
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <el-form-item>
+                <el-input v-model="dataForm.deviceName" :placeholder="$t('process.name')" clearable></el-input>
+            </el-form-item>
+            <el-select v-model="dataForm.state" placeholder="请选择" style="margin-right: 10px">
+                <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+            </el-select>
+            <el-form-item>
+                <el-button type="primary" @click="getDataList()">{{
+                $t('query')
+                }}</el-button>
+            </el-form-item>
+        </el-form>
+
+        <div class="mod-activiti__process">
+            <el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%">
+                <el-table-column prop="title" label="申请标题" header-align="center" align="center"></el-table-column>
+                <el-table-column prop="name" label="申请人信息" header-align="center" align="center"></el-table-column>
+                <el-table-column label="设备名称" header-align="center" align="center">
+                    <template slot-scope="scope">
+                        <span class="demand-text">{{
+                        (scope.row && scope.row.tbDeviceDTO && scope.row.tbDeviceDTO.name)
+                        }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="state" label="审批状态" header-align="center" align="center">
+                    <template slot-scope="scope">
+                        <span>{{wrjStateObj[scope.row.state]}}</span>
+                    </template>
+                </el-table-column>
+
+                <el-table-column label="应用领域" header-align="center" align="center">
+                    <template slot-scope="scope" v-if="scope.row.applicationArea">
+                        <span class="area-text" v-for="(x,i) in JSON.parse(scope.row.applicationArea)"
+                            :key="i">{{x}}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="需求依据" header-align="center" align="center" width="200">
+                    <template slot-scope="scope">
+                        <el-tooltip placement="top-start">
+                            <div class="tooltip-box" slot="content">{{(scope.row && scope.row.demand)}}</div>
+                            <span class="demand-text">{{
+                            (scope.row && scope.row.demand)
+                            }}</span>
+                        </el-tooltip>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+                    <template slot-scope="scope">
+                        <el-button type="text" size="small" @click="showDetail(scope.row)">详情</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
+                layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+                @current-change="pageCurrentChangeHandle">
+            </el-pagination>
+        </div>
+
+        <el-dialog title="审批" :visible.sync="centerDialogVisible" width="30%" center>
+            <el-form ref="form" :model="form" label-width="80px">
+                <el-form-item label="审批意见">
+                    <el-input type="textarea" v-model="form.auditViem" placeholder="请输入审批意见"></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="through(3)">不通过</el-button>
+                <el-button type="primary" @click="through(2)">通过</el-button>
+            </span>
+        </el-dialog>
+    </el-card>
+</template>
+  
+<script>
+import bus from '@/views/bus.js'
+import mixinViewModule from '@/mixins/view-module'
+import processModule from '@/mixins/process-module'
+import { addDynamicRoute } from '@/router'
+
+export default {
+    mixins: [mixinViewModule, processModule],
+    data() {
+        return {
+            mixinViewModuleOptions: {
+                getDataListURL: '/deviceApply/myDonePage',
+                getDataListIsPage: true,
+                activatedIsNeed: true,
+                deleteIsBatch: true,
+                deleteIsBatchKey: 'deploymentId'
+            },
+            centerDialogVisible: false,
+            form: {
+                auditViem: ''
+            },
+            dataForm: {
+                state: '',
+                deviceName: null
+            },
+            wrjStateObj: {
+                0: '待审批',
+                1: '未申请',
+                2: '通过',
+                3: '未通过'
+            },
+            // 详情
+            detailInfo: {},
+            // 设备详情
+            deviceDetailInfo: {}
+        }
+    },
+    computed: {
+        stateOptions() {
+            let arr = []
+            Object.keys(this.wrjStateObj).map(v => {
+                arr.push({
+                    label: this.wrjStateObj[v],
+                    value: v,
+                })
+            })
+            return arr
+        },
+    },
+    methods: {
+        showDetail(row) {
+            this.forwardDetail(row)
+        },
+        // 查看流程图
+        forwardDetail(data) {
+            console.log('data------------>', data);
+            console.log('this.$route------------>', this.$route);
+            var routeParams = {
+                routeName: `${this.$route.name}__detail_${data.id}`,
+                menuId: `${this.$route.meta.menuId}`,
+                title: `${this.$route.meta.title} - 详情`,
+                path: 'hasToDoTasks/deviceApprovalDetail',
+                params: {
+                    params: data,
+                    id: data.id,
+                }
+            }
+            console.log('routeParams------------>', routeParams);
+            addDynamicRoute(routeParams, this.$router)
+        },
+    },
+}
+</script>
+<style scoped>
+.demand-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.area-text {
+    padding: 0 4px;
+}
+
+.tooltip-box {
+    width: 400px;
+}
+</style>
+  
\ No newline at end of file
diff --git a/back/src/views/modules/hasToDoTasks/deviceApprovalDetail.vue b/back/src/views/modules/hasToDoTasks/deviceApprovalDetail.vue
new file mode 100644
index 00000000..11efa85f
--- /dev/null
+++ b/back/src/views/modules/hasToDoTasks/deviceApprovalDetail.vue
@@ -0,0 +1,319 @@
+<!--
+ * @Author: hisense.guoyue
+ * @Date: 2022-06-29 15:59:51
+ * @LastEditors: hisense.guoyue
+ * @LastEditTime: 2022-09-27 18:08:00
+ * @Description: 设备审批详情
+-->
+
+<!--  设备审批详情   -->
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <!-- 申请人详情 -->
+    <div>
+      <h3>申请人信息</h3>
+      <div class="big-BOX">
+        <p>
+          <span class="text">申请人：<span> {{ detailInfo.name || '--' }}</span></span>
+          <span class="text">电话：<span>{{ detailInfo.phone || '--' }}</span></span>
+          <span class="text">部门：<span>{{ detailInfo.dept || '--' }}</span></span>
+        </p>
+        <p>
+          <span class="text">
+            能力申请标题：<span>
+              {{ detailInfo.title || '--' }}</span></span>
+          <span class="text" v-if="detailInfo.applicationSystem">应用系统：<span>{{
+          detailInfo.applicationSystem || '--'
+          }}</span></span>
+          <span class="text"></span>
+        </p>
+        <p>
+          <span v-if="detailInfo.applicationArea">
+            应用领域：
+            <span class="area-item" v-for="(area, i) in JSON.parse(detailInfo.applicationArea)" :key="i">{{ area || '--'
+            }}</span>
+          </span>
+        </p>
+        <p>
+          <span>
+            需求依据：<span>
+              {{ detailInfo.demand || '--' }}</span></span>
+        </p>
+      </div>
+    </div>
+
+    <!-- 申请能力 -->
+    <div class="AbilityApply">
+      <h3>申请能力</h3>
+    </div>
+    <el-card shadow="never" class="aui-card--fill">
+      <h4>{{ $t('process.circulation') }}</h4>
+      <el-table :data="dataList" border style="width: 100%;">
+        <!-- 任务名称 -->
+        <el-table-column prop="activityName" :label="$t('process.taskName')" header-align="center" align="center">
+        </el-table-column>
+        <!-- 处理人 -->
+        <el-table-column prop="assigneeName" :label="$t('process.assignee')" header-align="center" align="center">
+        </el-table-column>
+        <!-- 流程开始时间 -->
+        <el-table-column prop="startTime" :label="$t('task.startTime')" header-align="center" align="center">
+        </el-table-column>
+        <!-- 流程结束时间 -->
+        <el-table-column prop="endTime" :label="$t('task.endTime')" header-align="center" align="center">
+        </el-table-column>
+        <!-- 审核意见 -->
+        <el-table-column prop="comment" :label="$t('process.comment')" header-align="center" align="center">
+        </el-table-column>
+        <!-- 任务时长（秒） -->
+        <el-table-column prop="durationInSeconds" :label="$t('task.durationInSeconds')" header-align="center"
+          align="center" width="180"></el-table-column>
+      </el-table>
+    </el-card>
+
+  </el-card>
+</template>
+  
+<script>
+import * as moment from 'moment';
+
+export default {
+  data() {
+    return {
+      // 详情信息
+      detailInfo: {},
+      dataList: [],
+    }
+  },
+  created() {
+    this.detailInfo = this.$route.params.params || {};
+    console.log('this.detailInfo------------>', this.detailInfo);
+    // 表格数据
+    let durationInSeconds = ''
+    if (this.detailInfo.auditTime && this.detailInfo.auditTime) {
+      durationInSeconds = moment(this.detailInfo.auditTime).diff(moment(this.detailInfo.createDate), 'seconds')
+    }
+    let _obj = {
+      activityName: this.detailInfo.title || '',
+      assigneeName: this.detailInfo.auditorName || '',
+      startTime: this.detailInfo.createDate || '',
+      endTime: this.detailInfo.auditTime,
+      comment: this.detailInfo.auditViem,
+      durationInSeconds: durationInSeconds,
+    }
+    this.dataList.push(_obj)
+  }
+}
+</script>
+<style scoped lang="scss">
+::v-deep .big-BOX {
+  background: rgba(244, 245, 248, 0.8);
+  padding: 24px;
+
+  h3 {
+    font-size: 16px;
+    color: #212121;
+  }
+
+  p {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    color: #212121;
+    font-size: 14px;
+
+    span {
+      display: inline-block;
+      margin-left: 8px;
+      line-height: 32px;
+
+      span {
+        font-weight: bold;
+      }
+    }
+
+    .text {
+      width: 500px;
+    }
+  }
+
+  .lastP {
+    margin-top: 16px;
+    width: 100%;
+
+    span {
+      display: flex;
+
+      span {
+        padding: 0 12px;
+        height: 32px;
+        background: rgba(232, 234, 239, 1);
+        border-radius: 2px;
+
+        button {
+          background: unset;
+          border: 0;
+          color: #0558e1;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+
+::v-deep .AbilityApply {
+  margin-top: 32px;
+
+  h3 {
+    font-size: 16px;
+    color: #212121;
+    border-bottom: 1px solid #dddee1;
+    padding-bottom: 10px;
+  }
+
+  ul {
+    padding-left: 0px;
+
+    li {
+      list-style: none;
+      padding: 30px 0;
+      border-bottom: 1px solid #dddee1;
+      display: flex;
+
+      img {
+        width: 100px;
+        height: 100px;
+      }
+
+      div {
+        margin-left: 16px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        h2 {
+          margin-bottom: 20px;
+          font-size: 20px;
+          color: #000;
+          display: flex;
+
+          span {
+            display: block;
+            font-size: 14px;
+            color: #ffffff;
+            margin-left: 8px;
+            background: rgba(0, 184, 230, 0.8);
+            display: flex;
+            align-items: center;
+            padding: 0 5px;
+            border-radius: 4px;
+          }
+        }
+
+        p {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .clearfix:after {
+      display: block;
+      content: "";
+      clear: both;
+    }
+
+    .title {
+      color: #0558e1;
+      font-size: 18px;
+      padding-bottom: 0;
+      border-bottom: 0;
+    }
+
+    .title:before {
+      content: "";
+      width: 6px;
+      height: 6px;
+      display: inline-block;
+      border-radius: 50%;
+      background: #0558e1;
+      vertical-align: middle;
+      margin-right: 10px;
+      margin-top: 6px;
+    }
+  }
+}
+
+::v-deep .agreeOr>div {
+  display: flex;
+  align-items: center;
+
+  .el-input {
+    margin-right: 10px;
+    margin-left: 32px;
+  }
+}
+
+::v-deep .agreeOr>div:last-of-type {
+  margin-top: 15px;
+}
+
+.blueAll {
+  ::v-deep .el-radio-button__inner {
+    width: 80px;
+    height: 32px;
+    line-height: 32px;
+    padding: 0;
+    border-radius: 2px;
+    background: #ffffff;
+    color: #0558e1;
+    border: 1px solid #0558e1;
+  }
+
+  ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
+    box-shadow: unset !important;
+    background: #0558e1;
+    color: #ffffff;
+  }
+}
+
+.inputBule {
+  width: 55px;
+  height: 32px;
+  line-height: 32px;
+  padding: 0;
+  border-radius: 2px;
+  background: #0558e1;
+  color: #ffffff;
+  border: 1px solid #0558e1;
+}
+
+.redAll {
+  margin-left: 10px;
+
+  ::v-deep .el-radio-button__inner {
+    width: 80px;
+    height: 32px;
+    line-height: 32px;
+    padding: 0;
+    border-radius: 2px;
+    border: 1px solid #e83a48;
+    background: #ffffff;
+    color: #e83a48;
+    margin-left: 10px;
+  }
+
+  ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
+    box-shadow: unset !important;
+    color: #ffffff;
+    background: #e83a48;
+  }
+}
+
+.blueInput {
+  width: 55px;
+}
+
+.area-item {
+  padding-right: 10px;
+}
+</style>
+  
\ No newline at end of file