交易组时间页面样式
This commit is contained in:
parent
aa66744970
commit
93893c2918
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="trade-group">
|
||||
<el-form-item>
|
||||
<el-form-item label="交易系统时间设置">
|
||||
<el-button type="primary" @click="addTableItem">添加</el-button>
|
||||
</el-form-item>
|
||||
<!-- 表格 -->
|
||||
|
|
@ -8,28 +8,28 @@
|
|||
<table>
|
||||
<template v-for="(item, index) in tradeGroupTree" :key="item.id">
|
||||
<tr>
|
||||
<td>顺序</td>
|
||||
<td rowspan="2">
|
||||
<el-input v-if="item.editStatus" v-model="item.name" />
|
||||
<td style="width: 50px">顺序</td>
|
||||
<td style="width: 120px" rowspan="2">
|
||||
<el-input style="width: 100px" v-if="item.editStatus" v-model="item.name" />
|
||||
<span v-else>{{ item.name }}</span>
|
||||
</td>
|
||||
<td>夏令时</td>
|
||||
<td>
|
||||
<td style="width: 70px">夏令时</td>
|
||||
<td style="width: 60px">
|
||||
<el-input v-if="item.editStatus" v-model="item.x_m" />
|
||||
<span v-else>{{ item.x_m }}</span>
|
||||
</td>
|
||||
<td>月</td>
|
||||
<td>
|
||||
<td style="width: 50px">月</td>
|
||||
<td style="width: 60px">
|
||||
<el-input v-if="item.editStatus" v-model="item.x_w" />
|
||||
<span v-else>{{ item.x_w }}</span>
|
||||
</td>
|
||||
<td>周</td>
|
||||
<td>
|
||||
<td style="width: 50px">周</td>
|
||||
<td style="width: 60px">
|
||||
<el-input v-if="item.editStatus" v-model="item.x_d" />
|
||||
<span v-else>{{ item.x_d }}</span>
|
||||
</td>
|
||||
<td>日</td>
|
||||
<td>交易时间</td>
|
||||
<td style="width: 50px">日</td>
|
||||
<td style="width: 90px">交易时间</td>
|
||||
<td class="time-picker-box">
|
||||
<template v-if="item.editStatus">
|
||||
<template v-if="item?.x_time_list">
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
</template>
|
||||
</template>
|
||||
</td>
|
||||
<td rowspan="2">
|
||||
<td rowspan="2" style="width: 140px">
|
||||
<el-button type="primary" v-if="!item.editStatus" @click="item.editStatus = true"
|
||||
>编辑</el-button
|
||||
>
|
||||
|
|
@ -137,7 +137,7 @@ import {
|
|||
editGroupApi,
|
||||
deleteGroupApi,
|
||||
} from '@/api/modules/trade/group'
|
||||
import {ElMessageBox} from 'element-plus'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
|
||||
/**
|
||||
* @description: 定义表格数据
|
||||
|
|
@ -310,7 +310,7 @@ table {
|
|||
|
||||
/* input 输入框也缩小 */
|
||||
:deep(.el-input) {
|
||||
width: 60px;
|
||||
width: 40px;
|
||||
|
||||
.el-input__inner {
|
||||
font-size: 12px;
|
||||
|
|
|
|||
|
|
@ -1,55 +1,56 @@
|
|||
<template>
|
||||
<div class="trade-group">
|
||||
<el-form-item>
|
||||
交易系统时间设置
|
||||
<el-button style="margin-left: 18px;" type="primary" @click="handleAdd">添加</el-button>
|
||||
<el-button style="margin-left: 18px;" type="danger" @click="handleDel">删除</el-button>
|
||||
</el-form-item>
|
||||
<!-- 表格 -->
|
||||
<div class="table-box">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>休市时间</th>
|
||||
<th>休市市场</th>
|
||||
<th>备注</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<el-input style="width: 80px;"/>
|
||||
</td>
|
||||
<td>
|
||||
<el-date-picker type="datetimerange" start-placeholder="Start date"
|
||||
end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss"
|
||||
date-format="YYYY-MM-DD HH:mm:ss" time-format="YYYY-MM-DD HH:mm:ss" />
|
||||
</td>
|
||||
<td>
|
||||
<el-select multiple placeholder="Select" style="width: 240px">
|
||||
<el-option :label="1" :value="1" />
|
||||
<el-option :label="2" :value="2" />
|
||||
<el-option :label="3" :value="3" />
|
||||
<el-option :label="4" :value="4" />
|
||||
<el-option :label="5" :value="5" />
|
||||
</el-select>
|
||||
</td>
|
||||
<td><el-input style="width: 250px;"/></td>
|
||||
<td>
|
||||
<el-button type="primary" @click="handleAdd">确认</el-button>
|
||||
<el-button type="danger" @click="handleDel">取消</el-button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="trade-group">
|
||||
<el-form-item label="交易系统时间设置">
|
||||
<el-button style="margin-left: 18px" type="primary" @click="handleAdd">添加</el-button>
|
||||
<el-button style="margin-left: 18px" type="danger" @click="handleDel">删除</el-button>
|
||||
</el-form-item>
|
||||
<!-- 表格 -->
|
||||
<div class="table-box">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>休市时间</th>
|
||||
<th>休市市场</th>
|
||||
<th>备注</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<el-input style="width: 80px" />
|
||||
</td>
|
||||
<td>
|
||||
<el-date-picker
|
||||
type="datetimerange"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
date-format="YYYY-MM-DD HH:mm:ss"
|
||||
time-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<el-select multiple placeholder="Select" style="width: 240px">
|
||||
<el-option :label="1" :value="1" />
|
||||
<el-option :label="2" :value="2" />
|
||||
<el-option :label="3" :value="3" />
|
||||
<el-option :label="4" :value="4" />
|
||||
<el-option :label="5" :value="5" />
|
||||
</el-select>
|
||||
</td>
|
||||
<td><el-input style="width: 250px" /></td>
|
||||
<td>
|
||||
<el-button type="primary" @click="handleAdd">确认</el-button>
|
||||
<el-button type="danger" @click="handleDel">取消</el-button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -72,106 +73,100 @@ const dialogType = ref('')
|
|||
* @description: 定义弹窗表格数据
|
||||
*/
|
||||
const tradeGroupForm = ref({
|
||||
// 交易组名称
|
||||
tradeGroupName: '',
|
||||
// 交易所ID
|
||||
exchangeId: '',
|
||||
// 状态
|
||||
status: 1,
|
||||
// 冬季交易时间
|
||||
winterTime: [],
|
||||
// 夏季交易时间
|
||||
summerTime: [],
|
||||
// 排序
|
||||
sort: 0,
|
||||
// 主键ID
|
||||
id: '',
|
||||
// 交易组名称
|
||||
tradeGroupName: '',
|
||||
// 交易所ID
|
||||
exchangeId: '',
|
||||
// 状态
|
||||
status: 1,
|
||||
// 冬季交易时间
|
||||
winterTime: [],
|
||||
// 夏季交易时间
|
||||
summerTime: [],
|
||||
// 排序
|
||||
sort: 0,
|
||||
// 主键ID
|
||||
id: '',
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* @description: 页面加载完成需要请求的数据
|
||||
*/
|
||||
onMounted(() => {
|
||||
})
|
||||
onMounted(() => {})
|
||||
|
||||
const handleAdd = () => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = '添加交易组'
|
||||
dialogType.value = 'add'
|
||||
tradeGroupForm.value = {
|
||||
tradeGroupName: '',
|
||||
winterTime: [],
|
||||
summerTime: [],
|
||||
status: 1,
|
||||
sort: 0,
|
||||
id: '',
|
||||
} as any
|
||||
}
|
||||
|
||||
const handleDel = () => {
|
||||
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = '添加交易组'
|
||||
dialogType.value = 'add'
|
||||
tradeGroupForm.value = {
|
||||
tradeGroupName: '',
|
||||
winterTime: [],
|
||||
summerTime: [],
|
||||
status: 1,
|
||||
sort: 0,
|
||||
id: '',
|
||||
} as any
|
||||
}
|
||||
|
||||
const handleDel = () => {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 给 table 及所有 td 加边框 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
|
||||
/* 宽度自适应内容 */
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* 宽度自适应内容 */
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
height: 48px;
|
||||
border: 1px solid #dcdfe6;
|
||||
padding: 4px 8px;
|
||||
/* 内边距缩小 */
|
||||
text-align: center;
|
||||
td,
|
||||
th {
|
||||
height: 48px;
|
||||
border: 1px solid #dcdfe6;
|
||||
padding: 4px 8px;
|
||||
/* 内边距缩小 */
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
/* 文字变小 */
|
||||
white-space: nowrap;
|
||||
/* 文字不换行 */
|
||||
vertical-align: middle;
|
||||
/* 垂直居中 */
|
||||
|
||||
/* 时间选择器容器：两个选择器横排不换行 */
|
||||
:deep(.el-time-picker) {
|
||||
display: inline-block;
|
||||
|
||||
.el-range-editor {
|
||||
width: 100px;
|
||||
/* 缩小时间选择器宽度 */
|
||||
font-size: 12px;
|
||||
/* 文字变小 */
|
||||
white-space: nowrap;
|
||||
/* 文字不换行 */
|
||||
vertical-align: middle;
|
||||
/* 垂直居中 */
|
||||
}
|
||||
|
||||
/* 时间选择器容器：两个选择器横排不换行 */
|
||||
:deep(.el-time-picker) {
|
||||
display: inline-block;
|
||||
|
||||
.el-range-editor {
|
||||
width: 100px;
|
||||
/* 缩小时间选择器宽度 */
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-range-input {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* input 输入框也缩小 */
|
||||
:deep(.el-input) {
|
||||
width: 60px;
|
||||
|
||||
.el-input__inner {
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮缩小 */
|
||||
:deep(.el-button) {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-range-input {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* input 输入框也缩小 */
|
||||
:deep(.el-input) {
|
||||
width: 60px;
|
||||
|
||||
.el-input__inner {
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮缩小 */
|
||||
:deep(.el-button) {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue