Joe
1 year ago
23 changed files with 945 additions and 54 deletions
@ -0,0 +1,63 @@ |
|||||
|
<template> |
||||
|
<div class='SimpleIcon' ref="SimpleIconRef" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
const cacheIcon = { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
name: 'SimpleIcon', |
||||
|
props: { |
||||
|
/** |
||||
|
* [pattern, replacement] |
||||
|
*/ |
||||
|
replaces: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
url: { |
||||
|
type: String, |
||||
|
default: null |
||||
|
} |
||||
|
}, |
||||
|
async created() { |
||||
|
if (!cacheIcon[this.url]) { |
||||
|
await fetch(this.url).then(async data => { |
||||
|
cacheIcon[this.url] = await new Response(data.body).text(); |
||||
|
}) |
||||
|
}; |
||||
|
|
||||
|
this._icon_replace_data = cacheIcon[this.url].replaceAll(...this.replaces); |
||||
|
|
||||
|
this.insertHTML(); |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.insertHTML(); |
||||
|
}, |
||||
|
methods: { |
||||
|
insertHTML() { |
||||
|
const el = this.$refs.SimpleIconRef; |
||||
|
if (!el) return; |
||||
|
|
||||
|
el.innerHTML = this._icon_replace_data; |
||||
|
|
||||
|
if (el.firstElementChild) { |
||||
|
const svg = el.firstElementChild; |
||||
|
el.replaceWith(el.firstElementChild) |
||||
|
|
||||
|
this.$nextTick(() => { |
||||
|
for (let key in el.dataset) { |
||||
|
svg.dataset[key] = ""; |
||||
|
} |
||||
|
|
||||
|
el.classList.forEach(className => svg.classList.add(className)) |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped></style> |
||||
|
After Width: | Height: | Size: 523 B |
|
Before Width: | Height: | Size: 624 B After Width: | Height: | Size: 493 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 689 B |
|
After Width: | Height: | Size: 767 B |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 918 B |
|
After Width: | Height: | Size: 734 B |
|
After Width: | Height: | Size: 486 B |
@ -1,3 +0,0 @@ |
|||||
> 规范: |
|
||||
> 按照 XXX/index.vue |
|
||||
> 再去 HeaderMenu 的 menuData.js 修改 |
|
||||
@ -0,0 +1,139 @@ |
|||||
|
<template> |
||||
|
<div class='SelectList'> |
||||
|
<div class="title"> |
||||
|
{{ data.title }} |
||||
|
</div> |
||||
|
<div class="body"> |
||||
|
<div class="card" v-for="item in (data.list || [])"> |
||||
|
<SimpleIcon class="icon" :url="require('@screen/images/form/delete.svg')" |
||||
|
:replaces='[`stroke="white"`, `stroke="#52D6FF"`]' /> |
||||
|
|
||||
|
<slot :data="item"> |
||||
|
<div class="info"> |
||||
|
<span>{{ item.name }}</span> |
||||
|
<span>{{ item.phone }}</span> |
||||
|
</div> |
||||
|
</slot> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="footer card"> |
||||
|
<img src="@screen/images/form/delete.svg" /> |
||||
|
<span>添加</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import SimpleIcon from "@screen/components/SimpleIcon.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'SelectList', |
||||
|
components: { |
||||
|
SimpleIcon |
||||
|
}, |
||||
|
props: { |
||||
|
data: { |
||||
|
/** |
||||
|
* { |
||||
|
* title: '标题', |
||||
|
* list: { |
||||
|
* name: "", |
||||
|
* phone: "", |
||||
|
* }[] |
||||
|
* } |
||||
|
*/ |
||||
|
type: Object, |
||||
|
default: () => ({}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.SelectList { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.title { |
||||
|
height: 22px; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
line-height: 19px; |
||||
|
letter-spacing: 1px; |
||||
|
background: linear-gradient(180deg, #3DE8FF 0%, #00BCD6 100%); |
||||
|
background-clip: text; |
||||
|
color: transparent; |
||||
|
margin-bottom: 15px; |
||||
|
|
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
width: 142px; |
||||
|
min-height: 65px; |
||||
|
background: #0D5F79; |
||||
|
border-radius: 2px 2px 2px 2px; |
||||
|
opacity: 1; |
||||
|
position: relative; |
||||
|
|
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 19px; |
||||
|
letter-spacing: 1px; |
||||
|
|
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.info { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
gap: 3px; |
||||
|
} |
||||
|
|
||||
|
&.active { |
||||
|
background: linear-gradient(180deg, #00AEE5 0%, #0086B1 100%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.body { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 9px; |
||||
|
overflow: auto; |
||||
|
height: 100%; |
||||
|
flex: 1; |
||||
|
|
||||
|
.card { |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.icon { |
||||
|
position: absolute; |
||||
|
width: 12px; |
||||
|
right: 3px; |
||||
|
top: 3px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
margin-top: 9px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 6px; |
||||
|
font-size: 15px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #4DD4FF; |
||||
|
line-height: 19px; |
||||
|
letter-spacing: 1px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,138 @@ |
|||||
|
<template> |
||||
|
<div class='SpecialTable'> |
||||
|
<div v-for="(dataItem, index) in data" class="row"> |
||||
|
<div class="bg normal"> |
||||
|
<div class="column" v-for="item in columns" :key="item.key" :style="{ width: item.width }"> |
||||
|
<div class="title" v-if="onlyFirstTitle ? !index : true"> |
||||
|
<slot :name="`title-${item.key}`" :title="item" :data="dataItem"> |
||||
|
{{ item.title }} |
||||
|
</slot> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<slot :name="`content-${item.key}`" :title="item" :data="dataItem" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="bg operation column"> |
||||
|
<div class="title"> |
||||
|
<slot name="operation-title"> |
||||
|
操作 |
||||
|
</slot> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<slot name="operation-content" :data="dataItem" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'SpecialTable', |
||||
|
props: { |
||||
|
/** |
||||
|
* { |
||||
|
* key: string; |
||||
|
* title: string; |
||||
|
* width: string |
||||
|
* }[] |
||||
|
*/ |
||||
|
columns: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
/** |
||||
|
* { |
||||
|
* id: string; |
||||
|
* [x: string]: any; |
||||
|
* }[] |
||||
|
*/ |
||||
|
data: { |
||||
|
type: Array, |
||||
|
default: () => [{}] |
||||
|
}, |
||||
|
onlyFirstTitle: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.SpecialTable { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
gap: 9px; |
||||
|
|
||||
|
.row { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
gap: 27px; |
||||
|
} |
||||
|
|
||||
|
.bg { |
||||
|
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, rgba(24, 57, 77, .7) 93%); |
||||
|
border-radius: 0px 0px 0px 0px; |
||||
|
border: 1px solid; |
||||
|
border-image: linear-gradient(180deg, rgba(1, 135, 178, 0), rgba(1, 135, 178, .51)) 1 1; |
||||
|
} |
||||
|
|
||||
|
.normal { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.column { |
||||
|
position: relative; |
||||
|
padding: 15px 18px; |
||||
|
// padding-top: 12px; |
||||
|
font-size: 20px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
line-height: 23px; |
||||
|
letter-spacing: 1px; |
||||
|
gap: 24px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.title { |
||||
|
background: linear-gradient(180deg, #3DE8FF 0%, #00BCD6 100%); |
||||
|
background-clip: text; |
||||
|
color: transparent; |
||||
|
// position: absolute; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
&:not(:last-child) { |
||||
|
&::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
background-image: url("~@screen/images/divide.svg"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
height: 100%; |
||||
|
width: 3px; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.operation { |
||||
|
padding: 24px 18px; |
||||
|
|
||||
|
.content { |
||||
|
gap: 9px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,118 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" title="修改值班信息表"> |
||||
|
<div class="ModifyDutyInformationTable"> |
||||
|
<div class="search"> |
||||
|
<div> |
||||
|
<Form :formList="formList" /> |
||||
|
</div> |
||||
|
|
||||
|
<ButtonGradient> |
||||
|
<template #prefix> |
||||
|
<img src="@screen/images/form/search.svg" /> |
||||
|
</template> |
||||
|
刷新 |
||||
|
</ButtonGradient> |
||||
|
</div> |
||||
|
<div class="body"> |
||||
|
<SelectList v-for="item in list" :data="item" /> |
||||
|
</div> |
||||
|
<div class="bottom"> |
||||
|
<Button>确认</Button> |
||||
|
<Button :style="{ backgroundColor: '#C9C9C9' }"> 取消</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import Button from "@screen/components/Buttons/Button.vue" |
||||
|
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
||||
|
import Form from '@screen/pages/control/event/event/EventDetailDialog/Form.vue'; |
||||
|
|
||||
|
import SelectList from "./../../../components/SelectList.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'ModifyDutyInformationTable', |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
ButtonGradient, |
||||
|
SelectList, |
||||
|
Form |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
emit: ['close'], |
||||
|
data() { |
||||
|
return { |
||||
|
formList: [{ |
||||
|
label: "值班时间:", |
||||
|
key: "事件源", |
||||
|
type: "input", |
||||
|
}, |
||||
|
{ |
||||
|
label: "操作人员:", |
||||
|
key: "桩号:", |
||||
|
type: "input", |
||||
|
}], |
||||
|
list: Array.from({ length: 15 }).map(item => ({ |
||||
|
title: "123456", |
||||
|
list: Array.from({ length: 15 }).map((_, index) => ({ |
||||
|
name: index, |
||||
|
phone: "12345678901" |
||||
|
})) |
||||
|
})) |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
return this.visible |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit('close', bool); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.ModifyDutyInformationTable { |
||||
|
width: 947px; |
||||
|
height: 658px; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
|
||||
|
.search { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.body { |
||||
|
display: flex; |
||||
|
gap: 9px; |
||||
|
height: 100%; |
||||
|
overflow-x: auto; |
||||
|
overflow-y: hidden; |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
display: flex; |
||||
|
gap: 15px; |
||||
|
justify-content: end; |
||||
|
|
||||
|
>div { |
||||
|
width: 96px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,76 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" title="操作记录"> |
||||
|
<div class="OperateRecord"> |
||||
|
<TimeLine :data="timeLine2List" direction="right" /> |
||||
|
|
||||
|
<div class="bottom"> |
||||
|
<Button>确认</Button> |
||||
|
<Button :style="{ backgroundColor: '#C9C9C9' }"> 取消</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import TimeLine from "@screen/components/TimeLine/TimeLine2/index.vue"; |
||||
|
import Button from "@screen/components/Buttons/Button.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'OperateRecord', |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
TimeLine |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
emit: ['close'], |
||||
|
data() { |
||||
|
return { |
||||
|
timeLine2List: Array.from({ length: 6 }).map(() => ({ |
||||
|
// title: "接警记录", |
||||
|
time: "2023-12-21 16:35:44", |
||||
|
name: "甘易玫", |
||||
|
desc: "描述性文字文字文字文字文字文字文字文字描述性文字文字文字文字文字文字文字文字", |
||||
|
posts: '淄博发展公司管理员' |
||||
|
})), |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
return this.visible |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit('close', bool); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.OperateRecord { |
||||
|
width: 540px; |
||||
|
height: 518px; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.bottom { |
||||
|
margin-top: 9px; |
||||
|
display: flex; |
||||
|
gap: 15px; |
||||
|
justify-content: end; |
||||
|
|
||||
|
>div { |
||||
|
width: 96px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,15 +1,213 @@ |
|||||
<template> |
<template> |
||||
<div class='DutyOfficer'> |
<div class='DutyOfficer'> |
||||
DutyOfficer |
<SpecialTable :columns="columns" :data="data"> |
||||
|
<template #title-DateDuty> |
||||
|
<div> |
||||
|
值班中心 |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #content-DateDuty="{ data }"> |
||||
|
<div class="item"> |
||||
|
<img src="@screen/images/form/calendar.svg" /> |
||||
|
{{ data['值班日期'] }} |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #content-DutyLeaderCenter="{ data }"> |
||||
|
<div class="parent"> |
||||
|
<div class="item"> |
||||
|
<img src="@screen/images/form/people.svg" /> |
||||
|
{{ data['值班日期'] }} |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<img src="@screen/images/form/phone.svg" /> |
||||
|
{{ data['值班日期'] }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #content-DispatchLeadership="{ data }"> |
||||
|
<div class="item-parent"> |
||||
|
<div class="item"> |
||||
|
<img src="@screen/images/form/people.svg" /> |
||||
|
{{ data['值班日期'] }} |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<img src="@screen/images/form/phone.svg" /> |
||||
|
{{ data['值班日期'] }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #content-DispatchDuty="{ data }"> |
||||
|
<div class="item-parent"> |
||||
|
<div class="item"> |
||||
|
<img src="@screen/images/form/people.svg" /> |
||||
|
{{ data['值班日期'] }} |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<img src="@screen/images/form/people.svg" /> |
||||
|
{{ data['值班日期'] }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #content-TravelDuty="{ data }"> |
||||
|
<div class="item-parent"> |
||||
|
<div class="item"> |
||||
|
<img src="@screen/images/form/people.svg" /> |
||||
|
{{ data['值班日期'] }} |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<img src="@screen/images/form/people.svg" /> |
||||
|
{{ data['值班日期'] }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #content-EmergencyLeadership="{ data }"> |
||||
|
<div class="item-parent"> |
||||
|
<div class="item"> |
||||
|
<img src="@screen/images/form/people.svg" /> |
||||
|
{{ data['值班日期'] }} |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<img src="@screen/images/form/phone.svg" /> |
||||
|
{{ data['值班日期'] }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #content-EmergencyDuty="{ data }"> |
||||
|
<div class="item-parent"> |
||||
|
<div class="item"> |
||||
|
<img src="@screen/images/form/people.svg" /> |
||||
|
{{ data['值班日期'] }} |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<img src="@screen/images/form/people.svg" /> |
||||
|
{{ data['值班日期'] }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #operation-content> |
||||
|
<ButtonGradient class="operate-button" @click.native="handleOperateRecord(true)"> |
||||
|
<template #prefix> |
||||
|
<img src="@screen/images/form/edit.svg" /> |
||||
|
</template> |
||||
|
修改 |
||||
|
</ButtonGradient> |
||||
|
<ButtonGradient class="operate-button" @click.native="handleModifyDutyInformationTable(true)"> |
||||
|
<template #prefix> |
||||
|
<img src="@screen/images/form/record.svg" /> |
||||
|
</template> |
||||
|
记录 |
||||
|
</ButtonGradient> |
||||
|
<ButtonGradient class="operate-button"> |
||||
|
<template #prefix> |
||||
|
<img src="@screen/images/form/delete.svg" /> |
||||
|
</template> |
||||
|
删除 |
||||
|
</ButtonGradient> |
||||
|
</template> |
||||
|
</SpecialTable> |
||||
|
|
||||
|
<OperateRecord :visible="operateRecordVisible" @close="handleOperateRecord(false)" /> |
||||
|
<ModifyDutyInformationTable :visible="modifyDutyInformationTableVisible" |
||||
|
@close="handleModifyDutyInformationTable(false)" /> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import SpecialTable from "./../../components/SpecialTable.vue" |
||||
|
import OperateRecord from "./components/OperateRecord.vue" |
||||
|
import ModifyDutyInformationTable from "./components/ModifyDutyInformationTable.vue" |
||||
|
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'DutyOfficer', |
name: 'DutyOfficer', |
||||
|
components: { |
||||
|
SpecialTable, |
||||
|
OperateRecord, |
||||
|
ModifyDutyInformationTable, |
||||
|
ButtonGradient |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
columns: [ |
||||
|
{ |
||||
|
key: "DateDuty", |
||||
|
title: "值班日期", |
||||
|
width: "180px" |
||||
|
}, |
||||
|
{ |
||||
|
key: "DutyLeaderCenter", |
||||
|
title: "中心值班领导", |
||||
|
width: "240px" |
||||
|
}, |
||||
|
{ |
||||
|
key: "DispatchLeadership", |
||||
|
title: "调度领导", |
||||
|
width: "240px" |
||||
|
}, |
||||
|
{ |
||||
|
key: "DispatchDuty", |
||||
|
title: "调度值班", |
||||
|
width: "180px" |
||||
|
}, |
||||
|
{ |
||||
|
key: "TravelDuty", |
||||
|
title: "出行值班", |
||||
|
width: "180px" |
||||
|
}, |
||||
|
{ |
||||
|
key: "EmergencyLeadership", |
||||
|
title: "应急领导", |
||||
|
width: "240px" |
||||
|
}, |
||||
|
{ |
||||
|
key: "EmergencyDuty", |
||||
|
title: "应急值班", |
||||
|
width: "180px" |
||||
|
}, |
||||
|
], |
||||
|
data: Array.from({ length: 15 }).map((_, index) => ({ |
||||
|
"id": index, |
||||
|
"值班日期": "2023-12-21", |
||||
|
"中心值班领导": "甘易玫", |
||||
|
"调度领导": "甘易玫", |
||||
|
"调度值班": "甘易玫", |
||||
|
"出行值班": "甘易玫", |
||||
|
"应急领导": "甘易玫", |
||||
|
"应急值班": "甘易玫", |
||||
|
})), |
||||
|
|
||||
|
operateRecordVisible: false, |
||||
|
modifyDutyInformationTableVisible: false |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleOperateRecord(bool) { |
||||
|
this.operateRecordVisible = bool; |
||||
|
}, |
||||
|
handleModifyDutyInformationTable(bool) { |
||||
|
this.modifyDutyInformationTableVisible = bool; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.DutyOfficer {} |
.DutyOfficer { |
||||
|
|
||||
|
.item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 6px; |
||||
|
|
||||
|
&:not(:last-child) { |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.operate-button { |
||||
|
width: 105px; |
||||
|
height: 41px; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue