|
@@ -4,50 +4,23 @@
|
|
<div class="search">
|
|
<div class="search">
|
|
<el-form label-width="100px" inline>
|
|
<el-form label-width="100px" inline>
|
|
<el-form-item label="场景标题:">
|
|
<el-form-item label="场景标题:">
|
|
- <el-input
|
|
|
|
- clearable
|
|
|
|
- v-model="pageProps.sceneName"
|
|
|
|
- style="width: 250px"
|
|
|
|
- placeholder="请输入"
|
|
|
|
- />
|
|
|
|
|
|
+ <el-input clearable v-model="pageProps.sceneName" style="width: 250px" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="场景码:">
|
|
<el-form-item label="场景码:">
|
|
- <el-input
|
|
|
|
- clearable
|
|
|
|
- v-model="pageProps.sceneCode"
|
|
|
|
- style="width: 250px"
|
|
|
|
- placeholder="请输入"
|
|
|
|
- />
|
|
|
|
|
|
+ <el-input clearable v-model="pageProps.sceneCode" style="width: 250px" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<template v-if="!simple">
|
|
<template v-if="!simple">
|
|
<el-form-item label="SN码:">
|
|
<el-form-item label="SN码:">
|
|
- <el-input
|
|
|
|
- clearable
|
|
|
|
- v-model="pageProps.snCode"
|
|
|
|
- style="width: 250px"
|
|
|
|
- placeholder="请输入"
|
|
|
|
- />
|
|
|
|
|
|
+ <el-input clearable v-model="pageProps.snCode" style="width: 250px" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="设备类型:">
|
|
<el-form-item label="设备类型:">
|
|
<el-select style="width: 250px" v-model="pageProps.cameraType" clearable>
|
|
<el-select style="width: 250px" v-model="pageProps.cameraType" clearable>
|
|
- <el-option
|
|
|
|
- :value="Number(key)"
|
|
|
|
- :label="type"
|
|
|
|
- v-for="(type, key) in DeviceTypeDesc"
|
|
|
|
- />
|
|
|
|
|
|
+ <el-option :value="Number(key)" :label="type" v-for="(type, key) in DeviceTypeDesc" />
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="拍摄时间:">
|
|
<el-form-item label="拍摄时间:">
|
|
- <el-date-picker
|
|
|
|
- clearable
|
|
|
|
- type="daterange"
|
|
|
|
- v-model="pageProps.shootTime"
|
|
|
|
- start-placeholder="请选择"
|
|
|
|
- end-placeholder="请选择"
|
|
|
|
- range-separator="-"
|
|
|
|
- placeholder="请选择"
|
|
|
|
- style="width: 250px"
|
|
|
|
- />
|
|
|
|
|
|
+ <el-date-picker clearable type="daterange" v-model="pageProps.shootTime" start-placeholder="请选择"
|
|
|
|
+ end-placeholder="请选择" range-separator="-" placeholder="请选择" style="width: 250px" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="绑定账号:">
|
|
<!-- <el-form-item label="绑定账号:">
|
|
<el-input
|
|
<el-input
|
|
@@ -69,13 +42,7 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="relics-content">
|
|
<div class="relics-content">
|
|
- <el-table
|
|
|
|
- :data="sceneArray"
|
|
|
|
- border
|
|
|
|
- row-key="'sceneCode'"
|
|
|
|
- @selection-change="(val) => tableProps && tableProps.selectionChange(val)"
|
|
|
|
- :ref="(table) => tableProps && (tableProps.tableRef.value = table)"
|
|
|
|
- >
|
|
|
|
|
|
+ <el-table :data="sceneArray" border row-key="'sceneCode'" @selection-change="handleTableSelect" ref="tableRef">
|
|
<slot name="table"></slot>
|
|
<slot name="table"></slot>
|
|
<el-table-column label="场景标题" v-slot:default="{ row }">
|
|
<el-table-column label="场景标题" v-slot:default="{ row }">
|
|
<a class="link" @click="gotoScene(row, false)">
|
|
<a class="link" @click="gotoScene(row, false)">
|
|
@@ -123,13 +90,8 @@
|
|
<el-button link type="primary" size="small" @click="gotoScene(row, true)">
|
|
<el-button link type="primary" size="small" @click="gotoScene(row, true)">
|
|
编辑
|
|
编辑
|
|
</el-button>
|
|
</el-button>
|
|
- <el-button
|
|
|
|
- link
|
|
|
|
- type="danger"
|
|
|
|
- @click="delHandler(row.sceneId)"
|
|
|
|
- size="small"
|
|
|
|
- v-if="row.calcStatus !== SceneStatus.RUN"
|
|
|
|
- >
|
|
|
|
|
|
+ <el-button link type="danger" @click="delHandler(row.sceneId)" size="small"
|
|
|
|
+ v-if="row.calcStatus !== SceneStatus.RUN">
|
|
删除
|
|
删除
|
|
</el-button>
|
|
</el-button>
|
|
</template>
|
|
</template>
|
|
@@ -137,21 +99,15 @@
|
|
</el-table>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div class="pag-layout">
|
|
<div class="pag-layout">
|
|
- <el-pagination
|
|
|
|
- background
|
|
|
|
- layout="total, prev, pager, next, sizes, jumper"
|
|
|
|
- v-model:page-size="pageProps.pageSize"
|
|
|
|
- :page-sizes="[10, 20, 50, 100]"
|
|
|
|
- :total="total"
|
|
|
|
- @current-change="(data: number) => pageProps.pageNum = data"
|
|
|
|
- :current-page="pageProps.pageNum"
|
|
|
|
- />
|
|
|
|
|
|
+ <el-pagination background layout="total, prev, pager, next, sizes, jumper" v-model:page-size="pageProps.pageSize"
|
|
|
|
+ :page-sizes="[10, 20, 50, 100]" :total="total" @current-change="(data: number) => pageProps.pageNum = data"
|
|
|
|
+ :current-page="pageProps.pageNum" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
-import { onActivated, ref, watch } from "vue";
|
|
|
|
|
|
+import { onActivated, ref, unref, watch, watchEffect } from "vue";
|
|
import { scenePageFetch, ScenePageProps, delSceneFetch } from "@/request";
|
|
import { scenePageFetch, ScenePageProps, delSceneFetch } from "@/request";
|
|
import {
|
|
import {
|
|
SceneStatusDesc,
|
|
SceneStatusDesc,
|
|
@@ -175,6 +131,7 @@ const initProps: ScenePageProps = {
|
|
const pageProps = ref({ ...initProps });
|
|
const pageProps = ref({ ...initProps });
|
|
const total = ref<number>(0);
|
|
const total = ref<number>(0);
|
|
const sceneArray = ref<Scene[]>([]);
|
|
const sceneArray = ref<Scene[]>([]);
|
|
|
|
+const tableRef = ref('');
|
|
|
|
|
|
const refresh = debounce(async () => {
|
|
const refresh = debounce(async () => {
|
|
const data = await scenePageFetch(pageProps.value);
|
|
const data = await scenePageFetch(pageProps.value);
|
|
@@ -197,6 +154,20 @@ const delHandler = async (relicsId: number) => {
|
|
|
|
|
|
watch(pageProps, refresh, { deep: true, immediate: true });
|
|
watch(pageProps, refresh, { deep: true, immediate: true });
|
|
onActivated(refresh);
|
|
onActivated(refresh);
|
|
|
|
+
|
|
|
|
+watchEffect(() => {
|
|
|
|
+ if (unref(tableRef)) {
|
|
|
|
+ // props.tableProps.tableRef.value = unref(tableRef)
|
|
|
|
+ }
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const handleTableSelect = (val: any) => {
|
|
|
|
+ if (props.tableProps && "selectionChange" in props.tableProps) {
|
|
|
|
+ console.log('selectionChange')
|
|
|
|
+ props.tableProps.selectionChange(val)
|
|
|
|
+ }
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
@@ -205,6 +176,7 @@ onActivated(refresh);
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
padding: 30px;
|
|
padding: 30px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.pag-layout {
|
|
.pag-layout {
|
|
margin-top: 20px;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
display: flex;
|
|
@@ -215,9 +187,11 @@ onActivated(refresh);
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
|
|
+
|
|
.search {
|
|
.search {
|
|
flex: 1;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
+
|
|
.relics-oper {
|
|
.relics-oper {
|
|
flex: 0 0 100px;
|
|
flex: 0 0 100px;
|
|
text-align: right;
|
|
text-align: right;
|