rt-sim-training-client/src/views/dispatcherStationManage/dispatchCmd.vue

<template>
  <el-dialog
    v-dialogDrag
    class="dispatcher-cmd chengdou-03__systerm"
    :title="title"
    :visible.sync="show"
    width="1300px"
    :before-close="doClose"
    :z-index="2010"
    :modal="false"
    :close-on-click-modal="false"
    append-to-body
  >
    <div class="main">
      <el-row style="height: 100%;">
        <el-col :span="6" style="height: 100%;">
          <div class="left">
            <el-tabs v-model="activeTab" type="border-card" @tab-click="tabClick">
              <el-tab-pane label="操作" name="operate">
                <div class="operate-box">
                  <div>数据库正常</div>
                  <div>缓存命令</div>
                  <div>接受命令</div>
                  <div>发送命令</div>
                  <div>签收完成</div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="查询" name="search">
                <div class="search-box">
                  <div>查询</div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="middle">
            <el-tabs v-model="cmdTab" type="border-card">
              <el-tab-pane label="调度命令" name="cmd">
                <el-form ref="form" :model="command" label-width="80px">
                  <el-form-item label="命令标题">
                    <el-input v-model="command.title" />
                  </el-form-item>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="命令号">
                        <el-input v-model="command.number" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="发令时间">
                        <el-date-picker v-model="command.sendTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-col :span="12">
                    <el-form-item label="发令人">
                      <el-input v-model="command.senderId" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="发令单位">
                      <el-input v-model="command.companyOfSender" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="授权时间">
                      <el-date-picker v-model="command.authorizationTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="授权状态">
                      <el-input v-model="command.authorizationStatus" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="定稿时间">
                      <el-date-picker v-model="command.finalizationTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="审核人">
                      <el-input v-model="command.reviewerId" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="拟令人">
                      <el-input v-model="command.author" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="命令分类">
                      <el-input v-model="command.type" />
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-tab-pane>
            </el-tabs>
            <el-tabs v-model="textTab" type="border-card">
              <el-tab-pane label="命令正文" name="text">
                <div class="cmd-box">
                  <div>
                    <el-input v-model="cmdTextarea" type="textarea" :rows="6" placeholder="请输入内容" />
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
            <div>
              <div class="title">
                <span>受令列表</span>
                <el-checkbox v-model="tableChecked">全选</el-checkbox>
              </div>
              <div class="table">
                <el-table :data="tableData" style="width: 100%" height="200">
                  <el-table-column type="selection" width="50" />
                  <el-table-column prop="date" label="受令单位" width="180" />
                  <el-table-column prop="name" label="抄送" width="180" />
                  <el-table-column prop="address" label="签收状态" />
                  <el-table-column prop="address" label="签收人" />
                  <el-table-column prop="address" label="签收时间" />
                </el-table>
              </div>
            </div>
            <div class="midle-bottom">
              <el-button type="primary">下达</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="right">
            常用词汇
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
export default {
    name:'DispatcherCmd',
    data() {
        return {
            dialogShow: false,
            activeTab: 'operate',
            cmdTab: 'cmd',
            textTab: 'text',
            command: {
                title: '',
                number: '',
                sendTime: '',
                senderId: '',
                companyOfSender: '',
                authorizationTime: '',
                authorizationStatus: '',
                finalizationTime: '',
                reviewerId: '',
                author: '',
                receiverIds: '',
                type: '',
                allSigned: ''
            },
            cmdTextarea: '',
            tableChecked: false,
            tableData: []
        };
    },
    computed: {
        show() {
            return this.dialogShow;
        },
        title() {
            return '调度命令管理系统';
        }
    },
    watch: {},
    beforeDestroy() {},
    mounted() {},
    methods:{
        doShow() {
            this.dialogShow = true;
        },
        doClose() {
            this.dialogShow = false;
        },
        tabClick() {
            console.log('tabClick');
        }
    }

};
</script>
<style lang="scss" scoped>
// .dispatcher-cmd{
// }
.main {
	height: 100%;
	.left {
		height: 100%;
	}
	/deep/ .el-tabs__item {
		height: 30px !important;
		line-height: 30px !important;
	}
	.middle {
		/deep/ .el-form-item {
			margin-bottom: 0px;
		}
		/deep/ .el-input__icon {
			line-height: 22px;
		}
		.midle-bottom {
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
<style>
.dispatcher-cmd .el-dialog .el-dialog__body {
	padding: 5px !important;
}
.dispatcher-cmd .el-dialog {
	margin-top: 8vh !important;
}
</style>