添加修改页面

Admin

2022-08-02 d592747d5eaa2cfbe698f8ac61222eb3aa75d1fc

 src/views/specialWorkSystem/workApplyManagement/myApply/index.vue

@@ -2,7 +2,7 @@
   <div class="home-container">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
         <el-tab-pane label="申请中" name="Applying">
            <el-scrollbar height="100%">
            <div style="height: 100%">
               <el-row class="homeCard">
                     <el-col :span="8">
                        <div class="grid-content topInfo">
@@ -26,11 +26,12 @@
                           ref="multipleTableRef"
                           :data="applyData"
                           style="width: 100%"
                           height="calc(100% - 100px)"
                           :header-cell-style="{background: '#fafafa'}"
                           @selection-change="handleSelectionChange"
                     >
                        <el-table-column type="selection" width="55" />
                        <el-table-column property="num" label="作业证编号" width="200"/>
                        <el-table-column type="index" label="作业证编号" width="200"/>
                        <el-table-column property="level" label="作业证等级" width="180" sortable />
                        <el-table-column property="applyDate" label="申请日期" sortable />
                        <el-table-column property="name" label="申请人" width="180"/>
@@ -47,7 +48,6 @@
                           </template>
                        </el-table-column>
                     </el-table>
                  </div>
                  <div class="pageBtn">
                     <el-pagination
                           v-model:currentPage="currentPage"
@@ -62,14 +62,10 @@
                     />
                  </div>
               </div>
               </div>
            </div>
               <el-dialog v-model="dialogDetails" title="作业票查看">
                  <el-form :model="details" label-width="120px">
                     <el-form-item label="作业证编号">
                        <el-input
                              v-model="details.num"
                              readonly
                        />
                     </el-form-item>
                     <el-form-item label="作业证等级">
                        <el-input
                              v-model="details.level"
@@ -114,12 +110,10 @@
        </span>
                  </template>
               </el-dialog>
            </el-scrollbar>
         </el-tab-pane>
         <el-tab-pane label="已通过" name="passed">
            <el-scrollbar height="100%">
               <el-row>
                  <div class="homeCard">
            <div style="height: 100%">
               <el-row class="homeCard">
                     <el-col :span="8">
                        <div class="grid-content topInfo">
                           <el-input v-model="searchWord" placeholder="作业证名称"></el-input>
@@ -127,7 +121,6 @@
                           <el-button plain>重置</el-button>
                        </div>
                     </el-col>
                  </div>
               </el-row>
               <div class="homeCard">
                  <div class="main-card">
@@ -137,17 +130,18 @@
                           <!--<el-button type="danger" :icon="Delete" size="default">删除</el-button>-->
                           <!--<el-button type="success" size="default">设置分类</el-button>-->
<!--                        </el-col>-->
<!--                        <el-button type="primary" :icon="Refresh" />-->
<!--                        <el-button type="primary" size="default" :icon="Refresh" />-->
<!--                     </el-row>-->
                     <el-table
                           ref="multipleTableRef"
                           :data="passedData"
                           style="width: 100%"
                           height="calc(100% - 48px)"
                           :header-cell-style="{background: '#fafafa'}"
                           @selection-change="handleSelectionChange"
                     >
                        <el-table-column type="selection" width="55" />
                        <el-table-column property="num" label="作业证编号" width="200"/>
                        <el-table-column type="index" label="编号" width="200"/>
                        <el-table-column property="level" label="作业证等级" width="180" sortable />
                        <el-table-column property="applyDate" label="申请日期" sortable />
                        <el-table-column property="name" label="申请人" width="180"/>
@@ -158,7 +152,6 @@
                           </template>
                        </el-table-column>
                     </el-table>
                  </div>
                  <div class="pageBtn">
                     <el-pagination
                           v-model:currentPage="currentPage"
@@ -173,13 +166,14 @@
                     />
                  </div>
               </div>
            </el-scrollbar>
               </div>
            </div>
         </el-tab-pane>
      </el-tabs>
   </div>
</template>

<script lang="ts">
<script lang="ts" setup>
   import { toRefs, reactive, defineComponent, ref } from 'vue';
   import { storeToRefs } from 'pinia';
   import { initBackEndControlRoutes } from '/@/router/backEnd';
@@ -209,12 +203,8 @@
      department: string
      status: string
   }
   export default defineComponent({
      name: 'myApply',
      setup() {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const state  = reactive<stateType>({});
         const activeName = ref('Applying')
         const handleClick = (tab: TabsPaneContext, event: Event) => {
            console.log(tab, event)
@@ -233,7 +223,30 @@
            console.log(`current page: ${val}`)
         }
         const applyData = reactive([
      {
         level: '等级一',
         applyDate: '2022-07-27 14:19:33',
         name: '张三',
         department: '部门一',
         status: '审核中'

      },
      {
         level: '等级一',
         applyDate: '2022-07-27 14:19:33',
         name: '张三',
         department: '部门一',
         status: '审核中'

      },
      {
         level: '等级一',
         applyDate: '2022-07-27 14:19:33',
         name: '张三',
         department: '部门一',
         status: '审核中'

      }
         ])
         const chosenIndex = ref(-1)
         const passedData: User[] = []
@@ -248,7 +261,7 @@
         }

         // 删除记录
         const applyRecord = (index) =>{
   const deleteRecord = (index) =>{
            chosenIndex.value = index
            deleteDialog.value = true
         }
@@ -264,44 +277,62 @@
            userInfos.value.projectId = value
            await initBackEndControlRoutes();
         };
         return {
            renderMenu,
            multipleTableRef,
            applyData,
            passedData,
            currentPage,
            pageSize,
            activeName,
            handleClick,
            handleSizeChange,
            handleCurrentChange,
            Plus,
            Delete,
            handleSelectionChange,
            Refresh,
            ...toRefs(state),
         };
      },
   });
</script>

<style scoped lang="scss">
   $homeNavLengh: 8;
   .home-container {
      height: 100%;
      height: calc(100vh - 114px);
      box-sizing: border-box;
      overflow: hidden;
      padding: 20px;
      .demo-tabs > .el-tabs__content {
         padding: 32px;
         color: #6b778c;
         font-size: 32px;
         font-weight: 600;
      .demo-tabs{
         width: 100%;
         height: 100%;

         &::v-deep(.el-tabs__content){
            height: calc(100% - 60px);
         }

         .el-tab-pane{
            height: 100%;
         }
      }
      .homeCard{
         width: 100%;
         padding: 20px;
         box-sizing: border-box;
         background: #fff;
         border-radius: 4px;

         .main-card{
            width: 100%;
            height: 100%;
            .cardTop{
               display: flex;
               align-items: center;
               justify-content: space-between;
               margin-bottom: 20px;
               .mainCardBtn{
                  margin: 0;
               }
            }
            .pageBtn{
               height: 60px;
               display: flex;
               align-items: center;
               justify-content: right;

               .demo-pagination-block + .demo-pagination-block {
                  margin-top: 10px;
               }
               .demo-pagination-block .demonstration {
                  margin-bottom: 16px;
               }
            }
         }
         &:last-of-type{
            height: calc(100% - 100px);
         }
      }
      .el-row{
         display: flex;
@@ -325,37 +356,6 @@
               white-space: nowrap;
               margin-right: 20px;
            }
         }
      }
      .mainPages{
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
      }
      .main-card{
         width: 100%;
         .cardTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            .mainCardBtn{
               margin: 0;
            }
         }
      }
      .pageBtn{
         display: flex;
         align-items: center;
         justify-content: right;
         margin-top: 20px;

         .demo-pagination-block + .demo-pagination-block {
            margin-top: 10px;
         }
         .demo-pagination-block .demonstration {
            margin-bottom: 16px;
         }
      }
   }