添加修改页面

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,107 +48,100 @@
                           </template>
                        </el-table-column>
                     </el-table>
                  </div>
                  <div class="pageBtn">
                     <el-pagination
                           v-model:currentPage="currentPage"
                           v-model:page-size="pageSize"
                           :page-sizes="[10, 15]"
                           small=false
                           background
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="100"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                     />
                     <div class="pageBtn">
                        <el-pagination
                              v-model:currentPage="currentPage"
                              v-model:page-size="pageSize"
                              :page-sizes="[10, 15]"
                              small=false
                              background
                              layout="total, sizes, prev, pager, next, jumper"
                              :total="100"
                              @size-change="handleSizeChange"
                              @current-change="handleCurrentChange"
                        />
                     </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"
                              readonly
                        />
                     </el-form-item>
                     <el-form-item label="申请日期">
                        <el-input
                              v-model="details.applyDate"
                              readonly
                        />
                     </el-form-item>
                     <el-form-item label="申请人">
                        <el-input
                              v-model="details.name"
                              readonly
                        />
                     </el-form-item>
                     <el-form-item label="申请部门">
                        <el-input
                              v-model="details.department"
                              readonly
                        />
                     </el-form-item>
                     <el-form-item label="状态">
                        <el-input
                              v-model="details.status"
                              readonly
                        />
                     </el-form-item>
                     <el-form-item>
                        <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                     </el-form-item>
                  </el-form>
               </el-dialog>
               <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear">
                  <span>您确定要删除该条记录吗？</span>
                  <template #footer>
        <span class="dialog-footer">
           <el-button @click="deleteDialog = false" size="default">取消</el-button>
         <el-button type="primary" @click="conFirmDelete" size="default" v-throttle>确认</el-button>
        </span>
                  </template>
               </el-dialog>
            </el-scrollbar>
            </div>
            <el-dialog v-model="dialogDetails" title="作业票查看">
               <el-form :model="details" label-width="120px">
                  <el-form-item label="作业证等级">
                     <el-input
                           v-model="details.level"
                           readonly
                     />
                  </el-form-item>
                  <el-form-item label="申请日期">
                     <el-input
                           v-model="details.applyDate"
                           readonly
                     />
                  </el-form-item>
                  <el-form-item label="申请人">
                     <el-input
                           v-model="details.name"
                           readonly
                     />
                  </el-form-item>
                  <el-form-item label="申请部门">
                     <el-input
                           v-model="details.department"
                           readonly
                     />
                  </el-form-item>
                  <el-form-item label="状态">
                     <el-input
                           v-model="details.status"
                           readonly
                     />
                  </el-form-item>
                  <el-form-item>
                     <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                  </el-form-item>
               </el-form>
            </el-dialog>
            <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear">
               <span>您确定要删除该条记录吗？</span>
               <template #footer>
                    <span class="dialog-footer">
                       <el-button @click="deleteDialog = false" size="default">取消</el-button>
                     <el-button type="primary" @click="conFirmDelete" size="default" v-throttle>确认</el-button>
                    </span>
               </template>
            </el-dialog>
         </el-tab-pane>
         <el-tab-pane label="已通过" name="passed">
            <el-scrollbar height="100%">
               <el-row>
                  <div class="homeCard">
                     <el-col :span="8">
                        <div class="grid-content topInfo">
                           <el-input v-model="searchWord" placeholder="作业证名称"></el-input>
                           <el-button type="primary">查询</el-button>
                           <el-button plain>重置</el-button>
                        </div>
                     </el-col>
                  </div>
            <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>
                        <el-button type="primary">查询</el-button>
                        <el-button plain>重置</el-button>
                     </div>
                  </el-col>
               </el-row>
               <div class="homeCard">
                  <div class="main-card">
<!--                     <el-row class="cardTop">-->
<!--                        <el-col :span="12" class="mainCardBtn">-->
<!--                           <el-button type="primary" :icon="Plus" size="default">申请</el-button>-->
                           <!--<el-button type="danger" :icon="Delete" size="default">删除</el-button>-->
                           <!--<el-button type="success" size="default">设置分类</el-button>-->
<!--                           <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,28 +152,28 @@
                           </template>
                        </el-table-column>
                     </el-table>
                  </div>
                  <div class="pageBtn">
                     <el-pagination
                           v-model:currentPage="currentPage"
                           v-model:page-size="pageSize"
                           :page-sizes="[10, 15]"
                           small=false
                           background
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="100"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                     />
                     <div class="pageBtn">
                        <el-pagination
                              v-model:currentPage="currentPage"
                              v-model:page-size="pageSize"
                              :page-sizes="[10, 15]"
                              small=false
                              background
                              layout="total, sizes, prev, pager, next, jumper"
                              :total="100"
                              @size-change="handleSizeChange"
                              @current-change="handleCurrentChange"
                        />
                     </div>
                  </div>
               </div>
            </el-scrollbar>
            </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,99 +203,136 @@
      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)
         }
         const multipleTableRef = ref<InstanceType<typeof ElTable>>()
         const multipleSelection = ref<User[]>([])
         const handleSelectionChange = (val: User[]) => {
            multipleSelection.value = val
         }
         const currentPage = ref(1)
         const pageSize = ref(10)
         const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`)
         }
         const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`)
         }
         const applyData = reactive([
   const userInfo = useUserInfo()
   const { userInfos } = storeToRefs(userInfo);
   const activeName = ref('Applying')
   const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
   }
   const multipleTableRef = ref<InstanceType<typeof ElTable>>()
   const multipleSelection = ref<User[]>([])
   const handleSelectionChange = (val: User[]) => {
      multipleSelection.value = val
   }
   const currentPage = ref(1)
   const pageSize = ref(10)
   const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`)
   }
   const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`)
   }
   const applyData = reactive([
      {
         level: '等级一',
         applyDate: '2022-07-27 14:19:33',
         name: '张三',
         department: '部门一',
         status: '审核中'

         ])
         const chosenIndex = ref(-1)
         const passedData: User[] = []
         const dialogDetails = ref(false)
         const details = ref({})
         const deleteDialog = ref(false)

         // 查看记录
         const viewRecord = (row) =>{
            details.value = JSON.parse(JSON.stringify(row))
            dialogDetails.value = true
         }

         // 删除记录
         const applyRecord = (index) =>{
            chosenIndex.value = index
            deleteDialog.value = true
         }

         // 弹窗确认删除记录
         const conFirmDelete = ()=> {
            applyData.splice(chosenIndex.value,1)
            deleteDialog.value = false
         }
         // 折线图
         const renderMenu = async (value: string) => {
            Session.set('projectId',value)
            userInfos.value.projectId = value
            await initBackEndControlRoutes();
         };
         return {
            renderMenu,
            multipleTableRef,
            applyData,
            passedData,
            currentPage,
            pageSize,
            activeName,
            handleClick,
            handleSizeChange,
            handleCurrentChange,
            Plus,
            Delete,
            handleSelectionChange,
            Refresh,
            ...toRefs(state),
         };
      },
   });
      {
         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[] = []
   const dialogDetails = ref(false)
   const details = ref({})
   const deleteDialog = ref(false)

   // 查看记录
   const viewRecord = (row) =>{
      details.value = JSON.parse(JSON.stringify(row))
      dialogDetails.value = true
   }

   // 删除记录
   const deleteRecord = (index) =>{
      chosenIndex.value = index
      deleteDialog.value = true
   }

   // 弹窗确认删除记录
   const conFirmDelete = ()=> {
      applyData.splice(chosenIndex.value,1)
      deleteDialog.value = false
   }
   // 折线图
   const renderMenu = async (value: string) => {
      Session.set('projectId',value)
      userInfos.value.projectId = value
      await initBackEndControlRoutes();
   };
</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;
         }
      }
   }