Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt

Your Name

2022-07-04 b5069cc8ebdb8bc51f1b45f0c49a7e385490a32a

 src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue

对比新文件
@@ -0,0 +1,246 @@
<template>
   <div class="home-container">
      <div v-for="(item,index) in approveSteps" class="stepItem">
         <div class="stepNum">{{index+1}}</div>
         <div class="stepCard">
            <el-card class="box-card" shadow="hover">
               <template #header>
                  <div class="card-header">
                     <div>步骤<span>{{index+1}}</span></div>
                     <div>
                        <el-button type="primary" size="default" @click="addFlow(index)">新增</el-button>
                        <el-button type="danger" size="default" @click="deleteFlow(index)">删除</el-button>
                     </div>
                  </div>
               </template>
               <div class="text item">审批部门：<span>{{item.department}}</span></div>
               <div class="text item">审批人员：<span>{{item.manager}}</span></div>
               <div class="text item">其他参数：<span>{{item.others}}</span></div>
            </el-card>
         </div>
      </div>
      <el-row>
         <el-button type="primary" @click="confirmEdit" size="default">确认</el-button>
         <el-button @click="cancelEdit" size="default">取消</el-button>
      </el-row>
      <el-drawer v-model="showAdd" direction="rtl">
         <template #title>
            <h4>新增审批流</h4>
         </template>
         <template #default>
            <el-form :model="addProgress" label-width="120px">
               <el-form-item label="审批部门">
                  <el-select v-model="addProgress.department" placeholder="请选择审批部门">
                     <el-option label="动土" value="动土" />
                     <el-option label="动火" value="动火" />
                  </el-select>
               </el-form-item>
               <el-form-item label="审批人员">
                  <el-select v-model="addProgress.manager" placeholder="请选择审批人员">
                     <el-option label="人员1" value="人员1" />
                     <el-option label="人员2" value="人员2" />
                  </el-select>
               </el-form-item>
               <el-form-item label="其他参数">
                  <el-input v-model="addProgress.others" />
               </el-form-item>
            </el-form>
         </template>
         <template #footer>
            <div style="flex: auto">
               <el-button type="primary" @click="confirmClick(ruleFormRef)" size="default">确认</el-button>
               <el-button @click="cancelClick" size="default">取消</el-button>
            </div>
         </template>
      </el-drawer>
      <el-dialog v-model="deleteDialog" title="提示" width="30%" center>
          <span>您确定要删除该审批流吗？</span>
         <template #footer>
           <span class="dialog-footer">
            <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
              <el-button @click="deleteDialog = false" size="default">取消</el-button>
           </span>
         </template>
      </el-dialog>
   </div>
</template>

<script lang="ts">
   import { toRefs, reactive, defineComponent, ref } from 'vue';
   import { storeToRefs } from 'pinia';
   import { initBackEndControlRoutes } from '/@/router/backEnd';
   import {useUserInfo} from "/@/stores/userInfo";
   import { Session } from '/@/utils/storage';
   import { ElMessage } from 'element-plus'
   let global: any = {
      homeChartOne: null,
      homeChartTwo: null,
      homeCharThree: null,
      dispose: [null, '', undefined],
   };

   interface stateType {
      homeOne: Array <type>
   }
   interface type {

   }
   export default defineComponent({
      name: 'approveProcessSetting',
      setup() {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const approveSteps = [
            {
               department: '动土',
               manager: '',
               others: ''
            },
            {
               department: '动土',
               manager: '',
               others: ''
            },
            {
               department: '动土',
               manager: '',
               others: ''
            }
         ];
         const showAdd = ref(false)
         const deleteDialog = ref(false)
         const chosenIndex = ref('')
         const addProgress = ref({
            department: '',
            manager: '',
            others: ''
         })
         const confirmClick = () => {
            approveSteps.splice(chosenIndex.value+1,0,addProgress.value)
            addProgress.value = {
               department: '',
               manager: '',
               others: ''
            }
            showAdd.value = false
         }
         const addFlow = (index) => {
            showAdd.value = true
            chosenIndex.value = index
         }
         const deleteFlow = (index) => {
            if(approveSteps.length>1){
               deleteDialog.value = true
               chosenIndex.value = index
            }else{
               ElMessage({
                  message: '抱歉最后一条无法删除',
                  type: 'warning',
               })
            }
         }
         const conFirmDelete = () => {
            const i = chosenIndex.value
            approveSteps.splice( i,1)
            deleteDialog.value = false
         }
         const cancelEdit = () => {

         }
         const confirmEdit = () =>{

         }
         const state  = reactive<stateType>({});
         // 折线图
         const renderMenu = async (value: string) => {
            Session.set('projectId',value)
            userInfos.value.projectId = value
            await initBackEndControlRoutes();
         };
         return {
            renderMenu,
            showAdd,
            approveSteps,
            addProgress,
            chosenIndex,
            deleteDialog,
            conFirmDelete,
            deleteFlow,
            addFlow,
            confirmClick,
            cancelEdit,
            confirmEdit,
            ...toRefs(state),
         };
      },
   });
</script>

<style scoped lang="scss">
   $homeNavLengh: 8;
   .home-container {
      overflow: hidden;
      padding: 80px;
      .stepItem{
         display: flex;
         align-items: flex-start;
         margin-bottom: 30px;
         padding-bottom: 30px;
         border-left: 2px solid #ccc;
         &:last-of-type{
            margin-bottom: 0;
            border-left: none;
         }
         .stepNum {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            box-sizing: border-box;
            color: #333;
            border: 2px solid #999;
            line-height: 26px;
            text-align: center;
            margin-right: 40px;
            margin-left: -16px;
            margin-top: -30px;
         }
         .stepCard {
            margin-top: -30px;

            .box-card {
               width: 480px;

               .card-header {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;

                  span{
                     font-weight: bold;
                     margin-left: 10px;
                  }
               }

               .text {
                  font-size: 14px;
               }

               .item {
                  margin-bottom: 18px;
               }
            }
         }
         &:hover .card-header{
            color: #0098F5;
         }
         &:hover .stepNum{
            border: 2px solid #0098F5;
            color: #0098F5;
         }
      }

      .el-form{
         padding: 40px 20px;
      }
   }
</style>