<template> | <template> | ||||
<n-modal | <n-modal | ||||
ref="modalRef" | |||||
v-bind="getModalOptions" | v-bind="getModalOptions" | ||||
:style="`width:${getModalOptions.width}px`" | :style="`width:${getModalOptions.width}px`" | ||||
:title="options.title" | :title="options.title" | ||||
<script> | <script> | ||||
import { defineComponent, computed } from 'vue' | |||||
import { defineComponent, computed, ref } from 'vue' | |||||
export default defineComponent({ | export default defineComponent({ | ||||
name: 'CardDialogModal', | name: 'CardDialogModal', | ||||
props: { | props: { | ||||
} | } | ||||
}, | }, | ||||
setup(props, { emit }) { | setup(props, { emit }) { | ||||
const modalRef = ref(null) | |||||
const getModalOptions = computed(() => { | const getModalOptions = computed(() => { | ||||
return { | return { | ||||
...props.options, | ...props.options, | ||||
width: props.options.width || 600, | width: props.options.width || 600, | ||||
preset: props.options.preset || 'dialog', | |||||
preset: props.options.preset || 'card', | |||||
showIcon: !!props.options.showIcon | showIcon: !!props.options.showIcon | ||||
} | } | ||||
}) | }) | ||||
const handleClose = function() { | const handleClose = function() { | ||||
emit('onClose', true) | emit('onClose', true) | ||||
} | } | ||||
// setTimeout(() => { | |||||
// const dialogHeaderEl = document.querySelector('.n-card-header') | |||||
// const dragDom = document.querySelector('.n-modal') | |||||
// dragDom.style.overflow = 'auto' | |||||
// dialogHeaderEl.style.cursor = 'move' | |||||
// const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) | |||||
// const moveDown = (e) => { | |||||
// // 鼠标按下,计算当前元素距离可视区的距离 | |||||
// const disX = e.clientX - dialogHeaderEl.offsetLeft | |||||
// const disY = e.clientY - dialogHeaderEl.offsetTop | |||||
// // 获取到的值带px 正则匹配替换 | |||||
// let styL, styT | |||||
// // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px | |||||
// if (sty.left.includes('%')) { | |||||
// styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100) | |||||
// styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100) | |||||
// } else { | |||||
// styL = +sty.left.replace(/\px/g, '') | |||||
// styT = +sty.top.replace(/\px/g, '') | |||||
// } | |||||
// document.onmousemove = function(e) { | |||||
// // 计算移动的距离 | |||||
// const l = e.clientX - disX | |||||
// const t = e.clientY - disY | |||||
// // 移动当前元素 | |||||
// dragDom.style.left = `${l + styL}px` | |||||
// dragDom.style.top = `${t + styT}px` | |||||
// } | |||||
// document.onmouseup = function(e) { | |||||
// document.onmousemove = null | |||||
// document.onmouseup = null | |||||
// } | |||||
// } | |||||
// dialogHeaderEl.onmousedown = moveDown | |||||
// }) | |||||
return { | return { | ||||
modalRef, | |||||
getModalOptions, | getModalOptions, | ||||
handleConfirm, | handleConfirm, | ||||
handleClose | handleClose | ||||
</script> | </script> | ||||
<style scoped lang='scss'> | <style scoped lang='scss'> | ||||
::v-deep(.n-scrollbar-content){ | |||||
&:first-child{ | |||||
display: none; | |||||
} | |||||
} | |||||
</style> | </style> |
<div> | <div> | ||||
<n-form ref="formRef" v-bind="getFormOptions"> | <n-form ref="formRef" v-bind="getFormOptions"> | ||||
<template v-for="(item, index) in getFormOptions.info" :key="`${index}-${item.label}`"> | <template v-for="(item, index) in getFormOptions.info" :key="`${index}-${item.label}`"> | ||||
<n-form-item v-if="['input'].includes(item.type) || !item.type" :label="item.label"> | |||||
<n-input v-model:value="getFormOptions.form[item.key]" v-bind="item.props" /> | |||||
</n-form-item> | |||||
<n-form-item v-if="['select'].includes(item.type) " :label="item.label"> | |||||
<n-select v-model:value="getFormOptions.form[item.key]" v-bind="item.props" /> | |||||
</n-form-item> | |||||
<n-form-item v-if="['area'].includes(item.type) " :label="item.label"> | |||||
<AreaCascader :ref="el=>{itemRefs[item.refIndex] = el}" v-model:value="getFormOptions.form[item.key]" v-bind="item.props" @selectd="handleSelect" /> | |||||
</n-form-item> | |||||
<n-form-item v-if="['date'].includes(item.type) " :label="item.label"> | |||||
<n-date-picker v-model="getFormOptions.form[item.key]" v-bind="item.props" /> | |||||
<n-form-item :class="{'hidden-item': index > showItemNum}" :label="item.label"> | |||||
<n-input v-if="['input'].includes(item.type) || !item.type" v-model:value="getFormOptions.form[item.key]" v-bind="item.props" /> | |||||
<n-select v-if="['select'].includes(item.type)" v-model:value="getFormOptions.form[item.key]" v-bind="item.props" /> | |||||
<AreaCascader v-if="['area'].includes(item.type)" :ref="el=>{itemRefs[item.refIndex] = el}" v-model:value="getFormOptions.form[item.key]" v-bind="item.props" @selectd="handleSelect" /> | |||||
<n-date-picker v-if="['date'].includes(item.type)" v-model="getFormOptions.form[item.key]" v-bind="item.props" /> | |||||
</n-form-item> | </n-form-item> | ||||
</template> | </template> | ||||
<slot name="expand" /> | |||||
<n-form-item class="form__button"> | <n-form-item class="form__button"> | ||||
<n-button @click="handleSearch">查询</n-button> | |||||
<n-button type="primary" @click="handleSearch">查询</n-button> | |||||
<n-button @click="handleReset">重置</n-button> | <n-button @click="handleReset">重置</n-button> | ||||
<n-button | <n-button | ||||
v-if="showButton" | v-if="showButton" | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { computed, ref, unref } from 'vue' | |||||
import { computed, ref, unref, watch } from 'vue' | |||||
import { NForm } from 'naive-ui' | import { NForm } from 'naive-ui' | ||||
import AreaCascader from '@/components/AreaCascader/index.vue' | import AreaCascader from '@/components/AreaCascader/index.vue' | ||||
export default { | export default { | ||||
}, | }, | ||||
emits: ['search', 'reset'], | emits: ['search', 'reset'], | ||||
setup(props, { emit }) { | setup(props, { emit }) { | ||||
const showItemNum = ref(3) | |||||
const showItemNum = ref(30) | |||||
const len = ref(props.info.length - 1) | const len = ref(props.info.length - 1) | ||||
const itemRefs = ref([]) | const itemRefs = ref([]) | ||||
const showButton = ref(!!(showItemNum.value < len.value)) | const showButton = ref(!!(showItemNum.value < len.value)) | ||||
/* 初始化搜索表单信息 */ | /* 初始化搜索表单信息 */ | ||||
function initForm() { | function initForm() { | ||||
Object.keys(form.value).forEach((key) => { | Object.keys(form.value).forEach((key) => { | ||||
form.value[key] = null | |||||
const index = unref(props).info.findIndex((item) => item.key === key) | |||||
form.value[key] = (props).info[index].value || null | |||||
}) | }) | ||||
itemRefs.value.forEach((item) => { | itemRefs.value.forEach((item) => { | ||||
item.clearValue() | item.clearValue() | ||||
} | } | ||||
} | } | ||||
const getFormOptions = computed(() => { | const getFormOptions = computed(() => { | ||||
props.info.forEach((item) => { | |||||
form.value[item.key] = item.value || null | |||||
}) | |||||
return { | return { | ||||
form: unref(form), | form: unref(form), | ||||
labelWidth: 'auto', | labelWidth: 'auto', | ||||
labelPlacement: 'left', | labelPlacement: 'left', | ||||
inline: true, | inline: true, | ||||
info: [...unref(props).info] | |||||
info: [...props.info] | |||||
} | } | ||||
}) | }) | ||||
watch(() => props.info, (value) => { | |||||
console.log(value) | |||||
}) | |||||
function handleSearch() { | function handleSearch() { | ||||
emit('search', getFormOptions.value.form) | emit('search', getFormOptions.value.form) | ||||
} | } | ||||
.n-cascader{ | .n-cascader{ | ||||
width: 200px; | width: 200px; | ||||
} | } | ||||
&.hidden-item{ | |||||
display: none; | |||||
} | |||||
transition: all 10s; | transition: all 10s; | ||||
} | } | ||||
.form__button{ | .form__button{ |
export const TASK_STATUS = [ | |||||
{ label: '待飞行', value: 0 }, | |||||
{ label: '飞行中', value: 1 }, | |||||
{ label: '飞行完成', value: 2 }, | |||||
{ label: '飞行失败', value: 3 } | |||||
] | |||||
export const TASK_MODE = [ | |||||
{ label: '机场服务', value: 0 } | |||||
] | |||||
export const TASK_TYPE = [ | |||||
{ label: '日常巡检', value: 0 }, | |||||
{ label: '应急巡检', value: 1 } | |||||
] |
} | } | ||||
/* 调用store中的方法,登录以及存储token和用户信息 */ | /* 调用store中的方法,登录以及存储token和用户信息 */ | ||||
const res = await userStore.getLoginToken(this.loginForm) | |||||
const res = await userStore.getLoginToken(data.loginForm) | |||||
if (res.code === 0) { | if (res.code === 0) { | ||||
const toPath = decodeURIComponent((route.query?.redirect || '/')) | const toPath = decodeURIComponent((route.query?.redirect || '/')) | ||||
route.path === '/login' ? router.replace('/') : router.replace(toPath) | route.path === '/login' ? router.replace('/') : router.replace(toPath) |
<template> | |||||
<n-drawer v-bind="getDrawerOptions" @update:show="handleDrawerColse"> | |||||
<n-drawer-content closable title="轨迹回放"> | |||||
轨迹回放 | |||||
</n-drawer-content> | |||||
</n-drawer> | |||||
</template> | |||||
<script> | |||||
import { h, defineComponent, computed, reactive, toRefs } from 'vue' | |||||
export default defineComponent({ | |||||
name: 'LiveDrawer', | |||||
props: { | |||||
/* 可见 */ | |||||
visible: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
/* 选中的数据 */ | |||||
data: { | |||||
type: Object, | |||||
default: () => {} | |||||
} | |||||
}, | |||||
emits: { | |||||
'update:visible': null | |||||
}, | |||||
setup(props, { emit }) { | |||||
const data = reactive({ | |||||
}) | |||||
/* 获取抽屉的信息 */ | |||||
const getDrawerOptions = computed(() => { | |||||
return { | |||||
show: props.visible, | |||||
width: '100%', | |||||
placement: 'right' | |||||
} | |||||
}) | |||||
function handleDrawerColse() { | |||||
emit('update:visible', false) | |||||
} | |||||
return { | |||||
...toRefs(data), | |||||
getDrawerOptions, | |||||
handleDrawerColse | |||||
} | |||||
} | |||||
}) | |||||
</script> | |||||
<style scoped lang='scss'> | |||||
.n-button+.n-button{ | |||||
margin-left: 30px; | |||||
} | |||||
</style> |
<template> | |||||
<n-drawer v-bind="getDrawerOptions" @update:show="handleDrawerColse"> | |||||
<n-drawer-content closable title="飞行直播"> | |||||
飞行直播 | |||||
</n-drawer-content> | |||||
</n-drawer> | |||||
</template> | |||||
<script> | |||||
import { h, defineComponent, computed, reactive, toRefs } from 'vue' | |||||
export default defineComponent({ | |||||
name: 'LiveDrawer', | |||||
props: { | |||||
/* 可见 */ | |||||
visible: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
/* 选中的数据 */ | |||||
data: { | |||||
type: Object, | |||||
default: () => {} | |||||
} | |||||
}, | |||||
emits: { | |||||
'update:visible': null | |||||
}, | |||||
setup(props, { emit }) { | |||||
const data = reactive({ | |||||
}) | |||||
/* 获取抽屉的信息 */ | |||||
const getDrawerOptions = computed(() => { | |||||
return { | |||||
show: props.visible, | |||||
width: '100%', | |||||
placement: 'right' | |||||
} | |||||
}) | |||||
function handleDrawerColse() { | |||||
emit('update:visible', false) | |||||
} | |||||
return { | |||||
...toRefs(data), | |||||
getDrawerOptions, | |||||
handleDrawerColse | |||||
} | |||||
} | |||||
}) | |||||
</script> | |||||
<style scoped lang='scss'> | |||||
.n-button+.n-button{ | |||||
margin-left: 30px; | |||||
} | |||||
</style> |
<template> | |||||
<Modal | |||||
:options="getModalOptions" | |||||
:on-positive-click="handleConfirm" | |||||
:on-negative-click="handleClose" | |||||
:on-close="handleClose" | |||||
> | |||||
<template #Context> | |||||
<n-form | |||||
ref="formRef" | |||||
:model="taskForm" | |||||
:rules="taskRules" | |||||
:label-width="80" | |||||
label-placement="left" | |||||
require-mark-placement="left" | |||||
:disabled="disabled" | |||||
> | |||||
<template v-for="(item,index) in getFormOptions" :key="index"> | |||||
<n-form-item :label="item.label" :path="item.key"> | |||||
<n-input v-if="item.type === 'input'" v-model:value="taskForm[item.key]" v-bind="item.props" /> | |||||
<n-select v-if="item.type === 'select'" v-model:value="taskForm[item.key]" v-bind="item.props" /> | |||||
<n-date-picker v-if="item.type === 'date'" v-model:value="taskForm[item.key]" v-bind="item.props" /> | |||||
</n-form-item> | |||||
</template> | |||||
</n-form> | |||||
</template> | |||||
</Modal> | |||||
</template> | |||||
<script> | |||||
import { defineComponent, computed, ref, unref, reactive, toRefs } from 'vue' | |||||
import Modal from '@/components/Modal/index.vue' | |||||
import form from '../tools/form.js' | |||||
export default defineComponent({ | |||||
name: 'UserModal', | |||||
components: { Modal }, | |||||
props: { | |||||
visible: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
type: { | |||||
type: String, | |||||
default: 'create' | |||||
}, | |||||
data: { | |||||
type: Object, | |||||
default: () => null | |||||
} | |||||
}, | |||||
emits: { | |||||
'update:visible': null, | |||||
'done': null | |||||
}, | |||||
setup(props, { emit }) { | |||||
const MODAL_TYPE = { | |||||
'create': '新建任务', | |||||
'preview': '任务详情', | |||||
'update': '编辑任务' | |||||
} | |||||
const formRef = ref() | |||||
const data = reactive({ | |||||
...toRefs(form), | |||||
...props.data, | |||||
disabled: props.type === 'preview' | |||||
}) | |||||
/* 获取弹窗的属性 */ | |||||
const getModalOptions = computed(() => { | |||||
return { | |||||
show: props.visible, | |||||
title: MODAL_TYPE[props.type], | |||||
width: 700, | |||||
negativeText: '取消', | |||||
positiveText: '确认' | |||||
} | |||||
}) | |||||
const getFormOptions = computed(() => { | |||||
return { | |||||
...form.formItem | |||||
} | |||||
}) | |||||
/** | |||||
* @description: 保存&编辑 | |||||
* @return {*} | |||||
*/ | |||||
const handleConfirm = () => { | |||||
formRef.value?.validate((errors) => { | |||||
if (!errors) { | |||||
const params = { | |||||
...data.taskForm | |||||
} | |||||
if (params.id) { | |||||
// 1 | |||||
} else { | |||||
/* 新增 */ | |||||
// 1 | |||||
} | |||||
} else { | |||||
$message.error('请先完成校验') | |||||
} | |||||
}) | |||||
return false | |||||
} | |||||
/* 关闭弹窗 */ | |||||
const handleClose = () => { | |||||
emit('update:visible', false) | |||||
} | |||||
return { | |||||
...toRefs(data), | |||||
formRef, | |||||
getModalOptions, | |||||
getFormOptions, | |||||
handleConfirm, | |||||
handleClose | |||||
} | |||||
} | |||||
}) | |||||
</script> | |||||
<style scoped lang='scss'> | |||||
.n-date-picker{ | |||||
width: 100%; | |||||
} | |||||
</style> |
<template> | |||||
<n-drawer v-bind="getDrawerOptions" @update:show="handleDrawerColse"> | |||||
<n-drawer-content closable title="问题核实"> | |||||
问题核实 | |||||
</n-drawer-content> | |||||
</n-drawer> | |||||
</template> | |||||
<script> | |||||
import { h, defineComponent, computed, reactive, toRefs } from 'vue' | |||||
export default defineComponent({ | |||||
name: 'LiveDrawer', | |||||
props: { | |||||
/* 可见 */ | |||||
visible: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
/* 选中的数据 */ | |||||
data: { | |||||
type: Object, | |||||
default: () => {} | |||||
} | |||||
}, | |||||
emits: { | |||||
'update:visible': null | |||||
}, | |||||
setup(props, { emit }) { | |||||
const data = reactive({ | |||||
}) | |||||
/* 获取抽屉的信息 */ | |||||
const getDrawerOptions = computed(() => { | |||||
return { | |||||
show: props.visible, | |||||
width: '100%', | |||||
placement: 'right' | |||||
} | |||||
}) | |||||
function handleDrawerColse() { | |||||
emit('update:visible', false) | |||||
} | |||||
return { | |||||
...toRefs(data), | |||||
getDrawerOptions, | |||||
handleDrawerColse | |||||
} | |||||
} | |||||
}) | |||||
</script> | |||||
<style scoped lang='scss'> | |||||
.n-button+.n-button{ | |||||
margin-left: 30px; | |||||
} | |||||
</style> |
<template> | <template> | ||||
<div> | <div> | ||||
<n-card> | <n-card> | ||||
<headSearch :info="search"> | |||||
<template #expand> | |||||
<n-form-item label="巡检机场"> | |||||
<n-date-picker /> | |||||
</n-form-item> | |||||
</template> | |||||
</headSearch> | |||||
<!-- <data-table | |||||
<headSearch :info="search" /> | |||||
<data-table | |||||
ref="tableRef" | ref="tableRef" | ||||
:columns="columns" | :columns="columns" | ||||
:data="data" | |||||
:row-key="(row) => row.id" | :row-key="(row) => row.id" | ||||
:request="loadDataTable" | |||||
size="large" | size="large" | ||||
@update:checked-row-keys="handleCheck" | |||||
> | > | ||||
<!-- :request="loadDataTable" --> | |||||
<template #tableTitle> | <template #tableTitle> | ||||
<n-button type="primary" @click="handleModal"> 新建 </n-button> | <n-button type="primary" @click="handleModal"> 新建 </n-button> | ||||
<n-popconfirm | |||||
<!-- <n-popconfirm | |||||
negative-text="取消" | negative-text="取消" | ||||
positive-text="确认" | positive-text="确认" | ||||
@positive-click="deleteComplex" | @positive-click="deleteComplex" | ||||
<n-button type="primary"> 删除 </n-button> | <n-button type="primary"> 删除 </n-button> | ||||
</template> | </template> | ||||
确认要删除选中数据吗? | 确认要删除选中数据吗? | ||||
</n-popconfirm> | |||||
</n-popconfirm> --> | |||||
</template> | </template> | ||||
</data-table> --> | |||||
</data-table> | |||||
</n-card> | </n-card> | ||||
</div> | </div> | ||||
<!-- 新增、编辑弹窗 --> | |||||
<TaskModal v-if="modalShow" v-model:visible="modalShow" :type="modalType" :data="rowData" /> | |||||
<!-- 直播抽屉 --> | |||||
<LiveDrawer v-model:visible="liveDrawer" :data="rowData" /> | |||||
<!-- 轨迹回放 --> | |||||
<DemandDrawer v-model:visible="demandDrawer" :data="rowData" /> | |||||
<!-- 问题核实 --> | |||||
<VerifyDrawer v-model:visible="verifyDrawer" :data="rowData" /> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import headSearch from '@/components/Search/index.vue' | import headSearch from '@/components/Search/index.vue' | ||||
import table from './tools/table.js' | |||||
import search from './tools/search.js' | import search from './tools/search.js' | ||||
import dataTable from '@/components/DataTable/index.vue' | import dataTable from '@/components/DataTable/index.vue' | ||||
import TaskModal from './components/TaskModal.vue' | |||||
import LiveDrawer from './components/LiveDrawer.vue' | |||||
import DemandDrawer from './components/DemandDrawer.vue' | |||||
import VerifyDrawer from './components/VerifyDrawer.vue' | |||||
import { h, unref, ref, toRefs, reactive } from 'vue' | |||||
export default { | export default { | ||||
name: 'TaskAll', | name: 'TaskAll', | ||||
components: { headSearch, dataTable }, | |||||
components: { headSearch, dataTable, TaskModal, LiveDrawer, DemandDrawer, VerifyDrawer }, | |||||
setup() { | setup() { | ||||
return { | |||||
const data = reactive({ | |||||
...toRefs(table), | |||||
data: [{}], | |||||
search | search | ||||
}) | |||||
/** | |||||
* @description: 加载表格数据 | |||||
* @param {*} res | |||||
* @return {*} | |||||
*/ | |||||
const loadDataTable = async(res) => { | |||||
const _params = { | |||||
...res | |||||
} | |||||
// return await getUserList(_params) | |||||
} | |||||
function handleModal() { | |||||
data.rowData = null | |||||
data.modalType = 'create' | |||||
data.modalShow = true | |||||
} | |||||
return { | |||||
...toRefs(data), | |||||
loadDataTable, | |||||
handleModal | |||||
} | } | ||||
} | } | ||||
} | } |
import { reactive } from 'vue' | |||||
import { TASK_MODE, TASK_TYPE } from '@/utils/dictionary.js' | |||||
const data = reactive({ | |||||
taskForm: { | |||||
name: '', | |||||
name2: '', | |||||
name3: '', | |||||
name4: '', | |||||
name5: '', | |||||
name6: null, | |||||
name7: '' | |||||
}, | |||||
taskRules: { | |||||
name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }], | |||||
name2: [{ required: true, type: 'number', message: '请选择巡检方式', trigger: 'blur' }], | |||||
name3: [{ required: true, type: 'number', message: '请选择巡检机场', trigger: 'blur' }], | |||||
name4: [{ required: true, type: 'number', message: '请选择巡检路线', trigger: 'blur' }], | |||||
name5: [{ required: true, type: 'number', message: '请选择任务类型', trigger: 'blur' }], | |||||
name6: [{ required: true, type: 'date', message: '请选择巡检时间', trigger: ['blur', 'change'] }] | |||||
}, | |||||
formItem: [ | |||||
{ type: 'input', key: 'name', label: '任务名称' }, | |||||
{ type: 'select', key: 'name2', label: '巡检方式', props: { options: TASK_MODE }}, | |||||
{ type: 'select', key: 'name3', label: '巡检机场', props: { options: [] }}, | |||||
{ type: 'select', key: 'name4', label: '巡检路线', props: { options: [] }}, | |||||
{ type: 'select', key: 'name5', label: '任务类型', props: { options: TASK_TYPE }}, | |||||
{ type: 'date', key: 'name6', label: '巡检时间', props: { type: 'datetime' }}, | |||||
{ type: 'input', key: 'name7', label: '备注', props: { type: 'textarea', autosize: { minRows: 3, maxRows: 3 }}} | |||||
] | |||||
}) | |||||
export default data |
const data = [ | |||||
import { reactive } from 'vue' | |||||
import { TASK_STATUS, TASK_TYPE } from '@/utils/dictionary.js' | |||||
const data = reactive([ | |||||
{ | { | ||||
label: '任务编号', | label: '任务编号', | ||||
key: 'code', | key: 'code', | ||||
props: { | props: { | ||||
placeholder: '请输入任务名称' | placeholder: '请输入任务名称' | ||||
} | } | ||||
}, | |||||
{ | |||||
label: '任务状态', | |||||
key: 'status', | |||||
type: 'select', | |||||
value: 'all', | |||||
props: { | |||||
placeholder: '请选择任务状态', | |||||
options: [ | |||||
{ label: '全部', value: 'all' }, | |||||
...TASK_STATUS | |||||
] | |||||
} | |||||
}, | |||||
{ | |||||
label: '巡检机场', | |||||
key: 'plain', | |||||
type: 'select', | |||||
props: { | |||||
placeholder: '请选择任务状态', | |||||
options: [], | |||||
onUpdateValue: () => { | |||||
const index = data.findIndex((item) => item.key === 'route') | |||||
data[index].value = '' | |||||
} | |||||
} | |||||
}, | |||||
{ | |||||
label: '巡检路线', | |||||
key: 'route', | |||||
type: 'select', | |||||
props: { | |||||
placeholder: '请选择任务状态', | |||||
options: [], | |||||
onUpdateValue: () => { | |||||
} | |||||
} | |||||
}, | |||||
{ | |||||
label: '任务类型', | |||||
key: 'type', | |||||
type: 'select', | |||||
value: 0, | |||||
props: { | |||||
placeholder: '请选择任务状态', | |||||
options: TASK_TYPE, | |||||
onUpdateValue: () => { | |||||
} | |||||
} | |||||
} | } | ||||
] | |||||
]) | |||||
export default data | export default data | ||||
// import TableTags from '@/components/DataTable/tools/Tags.vue' | |||||
import TableAction from '@/components/DataTable/tools/Action.vue' | |||||
import { h, reactive } from 'vue' | |||||
function getRowData(row, type) { | |||||
data.rowData = row | |||||
data.modalType = type | |||||
data.modalShow = true | |||||
} | |||||
function handleRowDelete(row) { | |||||
} | |||||
function handleImplement(row) { | |||||
data.rowData = row | |||||
} | |||||
/* 直播 */ | |||||
function handleTaskLive(row) { | |||||
data.rowData = row | |||||
data.liveDrawer = true | |||||
} | |||||
/* 回放 */ | |||||
function handleTaskDemand(row) { | |||||
data.rowData = row | |||||
data.demandDrawer = true | |||||
} | |||||
/* 问题核实 */ | |||||
function handleTaskVerify(row) { | |||||
data.rowData = row | |||||
data.verifyDrawer = true | |||||
} | |||||
const data = reactive({ | |||||
rowData: {}, | |||||
modalType: 'create', | |||||
modalShow: false, | |||||
liveDrawer: false, | |||||
demandDrawer: false, | |||||
verifyDrawer: false, | |||||
columns: [ | |||||
{ | |||||
title: '任务标号', | |||||
key: 'name', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '任务名称', | |||||
key: 'name', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '巡检方式', | |||||
key: 'name', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '巡检机场', | |||||
key: 'name', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '巡检路线', | |||||
key: 'name', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '任务类型', | |||||
key: 'name', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '巡检时间', | |||||
key: 'name', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '状态', | |||||
key: 'name', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '操作', | |||||
align: 'center', | |||||
width: 150, | |||||
fixed: 'right', | |||||
render(row) { | |||||
return h(TableAction, { | |||||
actions: [ | |||||
{ | |||||
label: '详情', | |||||
type: 'button', | |||||
props: { | |||||
type: 'primary', | |||||
text: true, | |||||
onClick: getRowData.bind(null, row, 'preview') | |||||
}, | |||||
auth: 'basic_list' | |||||
}, | |||||
{ | |||||
label: '删除', | |||||
type: 'popconfirm', | |||||
tip: '是否删除该数据?', | |||||
props: { | |||||
onClick: handleRowDelete.bind(null, row) | |||||
}, | |||||
ButtonProps: { | |||||
text: true, | |||||
type: 'primary' | |||||
}, | |||||
auth: 'basic_list' | |||||
}, | |||||
{ | |||||
label: '立即执行', | |||||
type: 'popconfirm', | |||||
tip: '是否立即开始执行任务?', | |||||
props: { | |||||
onClick: handleImplement.bind(null, row) | |||||
}, | |||||
ButtonProps: { | |||||
text: true, | |||||
type: 'primary' | |||||
}, | |||||
auth: 'basic_list' | |||||
}, | |||||
{ | |||||
label: '直播', | |||||
type: 'button', | |||||
props: { | |||||
type: 'primary', | |||||
text: true, | |||||
onClick: handleTaskLive.bind(null, row) | |||||
}, | |||||
auth: 'basic_list' | |||||
}, | |||||
{ | |||||
label: '轨迹', | |||||
type: 'button', | |||||
props: { | |||||
type: 'primary', | |||||
text: true, | |||||
onClick: handleTaskDemand.bind(null, row) | |||||
}, | |||||
auth: 'basic_list' | |||||
}, | |||||
{ | |||||
label: '问题核实', | |||||
type: 'button', | |||||
props: { | |||||
type: 'primary', | |||||
text: true, | |||||
onClick: handleTaskVerify.bind(null, row) | |||||
}, | |||||
auth: 'basic_list' | |||||
} | |||||
], | |||||
align: 'center' | |||||
}) | |||||
} | |||||
} | |||||
] | |||||
}) | |||||
export default data |