InteSecurePlatform.git

对比新文件
			@@ -0,0 +1,350 @@
			<template>
			<div class="home-container">
			<el-scrollbar 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" @click="dialogAddRecord=true">新建</el-button>
			<!-- <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
			<el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
			</el-col>
			<el-button type="primary" :icon="Refresh" size="default"/>
			</el-row>
			<el-table
			ref="multipleTableRef"
			:data="tableData"
			style="width: 100%"
			:header-cell-style="{background: '#fafafa'}"
			@selection-change="handleSelectionChange"
			>
			<el-table-column type="selection" width="100" />
			<el-table-column property="name" label="工作时段名称"/>
			<el-table-column property="range" label="排班时段"/>
			<el-table-column fixed="right" label="操作" align="center" width="250">
			<template #default="scope">
			<el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
			<el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
			<el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
			</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>
			</div>
			</el-scrollbar>
			<el-dialog v-model="dialogDetails" title="工作时段">
			<el-form :model="details" label-width="120px">
			<el-form-item label="工作时段名称">
			<el-input
			v-model="details.name"
			class="input-with-select"
			readonly
			/>
			</el-form-item>
			<el-form-item label="排班时段">
			<el-input
			v-model="details.range"
			class="input-with-select"
			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="dialogAddRecord" title="工作时段编辑" @close="closeAdd">
			<el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
			<el-form-item label="工作时段名称" prop="name">
			<el-input
			v-model="addRecord.name"
			>
			</el-input>
			</el-form-item>
			<el-form-item label="上班开始时间" prop="startTime">
			<el-time-select
			v-model="addRecord.startTime"
			start="00:00"
			step="00:15"
			end="24:00"
			placeholder="Select time"
			/>
			</el-form-item>
			<el-form-item label="上班结束时间" prop="endTime">
			<el-time-select
			v-model="addRecord.endTime"
			start="00:00"
			step="00:15"
			end="24:00"
			placeholder="Select time"
			/>
			</el-form-item>
			<el-form-item>
			<el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
			<el-button type="primary" @click="confirmAddRecord(addRef)" 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">确认</el-button>
			</span>
			</template>
			</el-dialog>
			</div>
			</template>

			<script lang="ts" setup>
			import { toRefs, reactive, ref } from 'vue';
			import { storeToRefs } from 'pinia';
			import { initBackEndControlRoutes } from '/@/router/backEnd';
			import {useUserInfo} from "/@/stores/userInfo";
			import { Session } from '/@/utils/storage';
			import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
			import { ElTable } from 'element-plus'
			import { FormInstance, FormRules } 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: 'workCheckinRecord',
			// setup() {
			const userInfo = useUserInfo()
			const { userInfos } = storeToRefs(userInfo);
			const state = reactive<stateType>({});
			const currentPage = ref(1)
			const pageSize = ref(10)
			const chosenIndex = ref(-1)
			const handleSizeChange = (val: number) => {
			console.log(`${val} items per page`)
			}
			const handleCurrentChange = (val: number) => {
			console.log(`current page: ${val}`)
			}
			const tableData = reactive(
			[
			{
			name: '四班三倒早班',
			range: '04:00 - 12:00'
			},
			{
			name: '四班三倒中班',
			range: '12:00 - 20:00'
			},
			{
			name: '四班三倒中班',
			range: '20:00 - 次日04:00'
			},
			{
			name: '常白班',
			range: '08:00 - 18:00'
			}
			]
			)
			const addRef = ref<FormInstance>()
			const addRules = reactive<FormRules>({
			name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
			startTime:[{required: true, message: '该内容不能为空',trigger:'blur'}],
			endTime:[{required: true, message: '该内容不能为空',trigger:'blur'}]
			})
			const dialogDetails = ref(false)
			const dialogAddRecord = ref(false)
			const deleteDialog = ref(false)
			const addRecord = ref({})
			const details = ref({})
			const viewRecord = (row) =>{
			details.value = JSON.parse(JSON.stringify(row))
			dialogDetails.value = true
			}
			const deleteRecord = (index) =>{
			chosenIndex.value = index
			deleteDialog.value = true
			}
			const conFirmDelete = ()=> {
			tableData.splice(chosenIndex.value,1)
			deleteDialog.value = false
			}
			const confirmAddRecord = async (formEl: FormInstance \| undefined) =>{
			if (!formEl) return
			await formEl.validate((valid, fields) => {
			if (valid) {
			if(chosenIndex.value == -1){
			if(addRecord.value.startTime >= addRecord.value.endTime){
			addRecord.value.endTime = '次日' + addRecord.value.endTime
			}
			addRecord.value.range = addRecord.value.startTime + '\xa0-\xa0' + addRecord.value.endTime
			tableData.push(addRecord.value)
			}else{
			if(addRecord.value.startTime >= addRecord.value.endTime){
			addRecord.value.endTime = '次日' + addRecord.value.endTime
			}
			addRecord.value.range = addRecord.value.startTime + '\xa0-\xa0' + addRecord.value.endTime
			tableData[chosenIndex.value] = addRecord.value
			}
			dialogAddRecord.value =false
			} else {
			console.log('error submit!', fields)
			}
			})

			}
			const closeAdd =()=>{
			addRecord.value={}
			chosenIndex.value = -1
			}
			const indexClear = ()=>{
			chosenIndex.value = -1
			}
			const editRecord =(index, row)=>{
			dialogAddRecord.value = true
			chosenIndex.value = index
			addRecord.value = JSON.parse(JSON.stringify(row))
			addRecord.value.startTime = addRecord.value.range.substring(0,5)
			addRecord.value.endTime = addRecord.value.range.substring(8)
			}
			// 折线图
			const renderMenu = async (value: string) => {
			Session.set('projectId',value)
			userInfos.value.projectId = value
			await initBackEndControlRoutes();
			};
			// return {
			// renderMenu,
			// multipleTableRef,
			// tableData,
			// currentPage,
			// pageSize,
			// dialogDetails,
			// details,
			// deleteDialog,
			// dialogAddRecord,
			// viewRecord,
			// deleteRecord,
			// handleSizeChange,
			// handleCurrentChange,
			// Plus,
			// Edit,
			// Delete,
			// Search,
			// Download,
			// handleSelectionChange,
			// Refresh,
			// ...toRefs(state),
			// };
			// },
			// });
			</script>

			<style scoped lang="scss">
			$homeNavLengh: 8;
			.home-container {
			height: 100%;
			overflow: hidden;
			padding: 20px;
			.homeCard{
			width: 100%;
			padding: 20px;
			background: #fff;
			border-radius: 4px;
			}
			.el-row{
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			&:last-child {
			margin-bottom: 0;
			}
			.grid-content{
			align-items: center;
			min-height: 36px;
			}

			.topInfo {
			display: flex;
			align-items: center;
			font-size: 16px;
			font-weight: bold;

			&>div{
			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;
			}
			}
			}
			.el-input{
			width: 100% !important;
			}
			.el-date-editor::v-deep{
			width: 100%;
			}
			.el-select{
			width: 100%;
			}
			</style>