|
@@ -1,166 +1,176 @@
|
|
|
<template>
|
|
|
<div class="startFrom">
|
|
|
- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" :validate-on-rule-change="false">
|
|
|
- <p class="starttitleSty">单据信息:</p>
|
|
|
- <el-row class="danjuMsg">
|
|
|
- <el-col :span="6">
|
|
|
- <div class="danjuMsg_data">
|
|
|
- <span class="data_tit">业务编号:</span>
|
|
|
- <span>VB131315</span>
|
|
|
- </div>
|
|
|
- <div class="danjuMsg_data">
|
|
|
- <span class="data_tit">流程状态:</span>
|
|
|
- <span>进行中</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="danjuMsg_data">
|
|
|
- <span class="data_tit">填报日期:</span>
|
|
|
- <span>2023-02-23</span>
|
|
|
- </div>
|
|
|
- <div class="danjuMsg_data">
|
|
|
- <span class="data_tit">制单人员:</span>
|
|
|
- <span>XXX</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="danjuMsg_data">
|
|
|
- <span class="data_tit">业务简述:</span>
|
|
|
- <span>国电电力2023年关键业绩指标</span>
|
|
|
- </div>
|
|
|
- <div class="danjuMsg_data">
|
|
|
- <span class="data_tit">填报单位:</span>
|
|
|
- <span>XXX</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <p class="starttitleSty">基本信息:</p>
|
|
|
- <el-row class="danjuMsg">
|
|
|
- <el-col :span="6">
|
|
|
- <div class="danjuMsg_data" style="display:flex;">
|
|
|
- <span class="data_tit">单位名称:</span>
|
|
|
- <el-form-item prop="">
|
|
|
- <el-input v-model="input" placeholder="Please input" />
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <div class="danjuMsg_data" style="display:flex;">
|
|
|
- <span class="data_tit" style="display:inline-block;width:60px">年度:</span>
|
|
|
- <el-form-item prop="">
|
|
|
- <el-input v-model="input" placeholder="Please input" />
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="danjuMsg_data" style="display:flex;">
|
|
|
- <span class="data_tit data_tit_wd">业务类别:</span>
|
|
|
- <el-form-item prop="">
|
|
|
- <el-input v-model="input" placeholder="Please input" />
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <div class="danjuMsg_data" style="display:flex;">
|
|
|
- <span class="data_tit data_tit_wd">年度考评得分:</span>
|
|
|
- <el-form-item prop="">
|
|
|
- <el-input-number
|
|
|
- v-model="num"
|
|
|
- :min="1"
|
|
|
- :max="10"
|
|
|
- size="small"
|
|
|
- controls-position="right"
|
|
|
- @change="handleChange"
|
|
|
+ <el-dialog title="考评启动详情" v-model="dialogVisible" width="1400px" :close-on-click-modal="false">
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" :validate-on-rule-change="false">
|
|
|
+ <p class="starttitleSty">单据信息:</p>
|
|
|
+ <el-row class="danjuMsg">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="danjuMsg_data">
|
|
|
+ <span class="data_tit">业务编号:</span>
|
|
|
+ <span>VB131315</span>
|
|
|
+ </div>
|
|
|
+ <div class="danjuMsg_data">
|
|
|
+ <span class="data_tit">流程状态:</span>
|
|
|
+ <span>进行中</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="danjuMsg_data">
|
|
|
+ <span class="data_tit">填报日期:</span>
|
|
|
+ <span>2023-02-23</span>
|
|
|
+ </div>
|
|
|
+ <div class="danjuMsg_data">
|
|
|
+ <span class="data_tit">制单人员:</span>
|
|
|
+ <span>XXX</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="danjuMsg_data">
|
|
|
+ <span class="data_tit">业务简述:</span>
|
|
|
+ <span>国电电力2023年关键业绩指标</span>
|
|
|
+ </div>
|
|
|
+ <div class="danjuMsg_data">
|
|
|
+ <span class="data_tit">填报单位:</span>
|
|
|
+ <span>XXX</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <p class="starttitleSty">基本信息:</p>
|
|
|
+ <el-row class="danjuMsg">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="danjuMsg_data" style="display:flex;">
|
|
|
+ <span class="data_tit">单位名称:</span>
|
|
|
+ <el-form-item prop="">
|
|
|
+ <el-input v-model="input" placeholder="Please input" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="danjuMsg_data" style="display:flex;">
|
|
|
+ <span class="data_tit" style="display:inline-block;width:60px">年度:</span>
|
|
|
+ <el-form-item prop="">
|
|
|
+ <el-input v-model="input" placeholder="Please input" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="danjuMsg_data" style="display:flex;">
|
|
|
+ <span class="data_tit data_tit_wd">业务类别:</span>
|
|
|
+ <el-form-item prop="">
|
|
|
+ <el-input v-model="input" placeholder="Please input" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="danjuMsg_data" style="display:flex;">
|
|
|
+ <span class="data_tit data_tit_wd">年度考评得分:</span>
|
|
|
+ <el-form-item prop="">
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ size="small"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="danjuMsg_data" style="display:flex;">
|
|
|
+ <span class="data_tit data_tit_wd">考评总分:</span>
|
|
|
+ <el-form-item prop="">
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ :min="1"
|
|
|
+ :max="10"
|
|
|
+ size="small"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="danjuMsg_data" style="display:flex;">
|
|
|
+ <span class="data_tit data_tit_wd">年度考评级别:</span>
|
|
|
+ <el-form-item prop="">
|
|
|
+ <el-input v-model="input" placeholder="Please input" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="danjuMsg_data" style="display:flex;">
|
|
|
+ <span class="data_tit data_tit_wd">任务进度:</span>
|
|
|
+ <el-form-item prop="">
|
|
|
+ <el-input v-model="input" placeholder="Please input" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="danjuMsg_data" style="display:flex;">
|
|
|
+ <span class="data_tit data_tit_wd">年度考评排名:</span>
|
|
|
+ <el-form-item prop="">
|
|
|
+ <el-input v-model="input" placeholder="Please input" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <p class="starttitleSty">考评目标:</p>
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column type="index" label="序号" width="80" />
|
|
|
+ <el-table-column label="指标项" prop="targetindex" width="300" />
|
|
|
+ <el-table-column label="业务分类" prop="type" width="100" />
|
|
|
+ <el-table-column label="填报部门">
|
|
|
+ <template #default="scope">
|
|
|
+ <!-- <span>{{scope.row.dept}}</span> -->
|
|
|
+ <el-input v-model="scope.row.dept" placeholder="Please input" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="填报人">
|
|
|
+ <template #default="scope">
|
|
|
+ <!-- <span>{{scope.row.eidtor}}</span> -->
|
|
|
+ <el-input v-model="scope.row.eidtor" placeholder="Please input" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="填报日期">
|
|
|
+ <template #default="scope">
|
|
|
+ <!-- <span>{{scope.row.eidDate}}</span> -->
|
|
|
+ <el-date-picker
|
|
|
+ v-model="scope.row.eidDate"
|
|
|
+ type="date"
|
|
|
+ placeholder="Pick a day"
|
|
|
+ :size="size"
|
|
|
/>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="danjuMsg_data" style="display:flex;">
|
|
|
- <span class="data_tit data_tit_wd">考评总分:</span>
|
|
|
- <el-form-item prop="">
|
|
|
- <el-input-number
|
|
|
- v-model="num"
|
|
|
- :min="1"
|
|
|
- :max="10"
|
|
|
- size="small"
|
|
|
- controls-position="right"
|
|
|
- @change="handleChange"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <div class="danjuMsg_data" style="display:flex;">
|
|
|
- <span class="data_tit data_tit_wd">年度考评级别:</span>
|
|
|
- <el-form-item prop="">
|
|
|
- <el-input v-model="input" placeholder="Please input" />
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="danjuMsg_data" style="display:flex;">
|
|
|
- <span class="data_tit data_tit_wd">任务进度:</span>
|
|
|
- <el-form-item prop="">
|
|
|
- <el-input v-model="input" placeholder="Please input" />
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <div class="danjuMsg_data" style="display:flex;">
|
|
|
- <span class="data_tit data_tit_wd">年度考评排名:</span>
|
|
|
- <el-form-item prop="">
|
|
|
- <el-input v-model="input" placeholder="Please input" />
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <p class="starttitleSty">考评目标:</p>
|
|
|
- <el-table :data="tableData" border style="width: 100%">
|
|
|
- <el-table-column type="index" label="序号" width="80" />
|
|
|
- <el-table-column label="指标项" prop="targetindex" width="300" />
|
|
|
- <el-table-column label="业务分类" prop="type" width="100" />
|
|
|
- <el-table-column label="填报部门">
|
|
|
- <template #default="scope">
|
|
|
- <!-- <span>{{scope.row.dept}}</span> -->
|
|
|
- <el-input v-model="scope.row.dept" placeholder="Please input" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="填报人">
|
|
|
- <template #default="scope">
|
|
|
- <!-- <span>{{scope.row.eidtor}}</span> -->
|
|
|
- <el-input v-model="scope.row.eidtor" placeholder="Please input" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="填报日期">
|
|
|
- <template #default="scope">
|
|
|
- <!-- <span>{{scope.row.eidDate}}</span> -->
|
|
|
- <el-date-picker
|
|
|
- v-model="scope.row.eidDate"
|
|
|
- type="date"
|
|
|
- placeholder="Pick a day"
|
|
|
- :size="size"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="审批人">
|
|
|
- <template #default="scope">
|
|
|
- <!-- <span>{{scope.row.approvalor}}</span> -->
|
|
|
- <el-input v-model="scope.row.approvalor" placeholder="Please input" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="计划分值">
|
|
|
- <template #default="scope">
|
|
|
- <!-- <span>{{scope.row.plan}}</span> -->
|
|
|
- <el-input v-model="scope.row.plan" placeholder="Please input" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="进度分值">
|
|
|
- <template #default="scope">
|
|
|
- <!-- <span>{{scope.row.progress}}</span> -->
|
|
|
- <el-input v-model="scope.row.progress" placeholder="Please input" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="综合得分">
|
|
|
- <template #default="scope">
|
|
|
- <!-- <span>{{scope.row.synthesize}}</span> -->
|
|
|
- <el-input v-model="scope.row.synthesize" placeholder="Please input" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-form>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="审批人">
|
|
|
+ <template #default="scope">
|
|
|
+ <!-- <span>{{scope.row.approvalor}}</span> -->
|
|
|
+ <el-input v-model="scope.row.approvalor" placeholder="Please input" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="计划分值">
|
|
|
+ <template #default="scope">
|
|
|
+ <!-- <span>{{scope.row.plan}}</span> -->
|
|
|
+ <el-input v-model="scope.row.plan" placeholder="Please input" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="进度分值">
|
|
|
+ <template #default="scope">
|
|
|
+ <!-- <span>{{scope.row.progress}}</span> -->
|
|
|
+ <el-input v-model="scope.row.progress" placeholder="Please input" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="综合得分">
|
|
|
+ <template #default="scope">
|
|
|
+ <!-- <span>{{scope.row.synthesize}}</span> -->
|
|
|
+ <el-input v-model="scope.row.synthesize" placeholder="Please input" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button type="primary" plain>发 布</el-button>
|
|
|
+ <el-button type="warning" plain>保 存</el-button>
|
|
|
+ <el-button >流 程</el-button>
|
|
|
+ <el-button type="success" plain>导 出</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -168,6 +178,7 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ dialogVisible: false,
|
|
|
tableData: [],
|
|
|
ruleForm: {
|
|
|
|
|
@@ -291,58 +302,72 @@ export default {
|
|
|
|
|
|
<style lang="less">
|
|
|
.startFrom{
|
|
|
- .starttitleSty{
|
|
|
- border-left: 4px solid #007aab;
|
|
|
- padding-left: 5px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- font-family: '微软雅黑';
|
|
|
- margin: 20px 0;
|
|
|
- }
|
|
|
- .el-table{
|
|
|
- .el-table__body-wrapper{
|
|
|
- height: 29vh;
|
|
|
- }
|
|
|
- .el-table__row{
|
|
|
- .cell{
|
|
|
- .el-input{
|
|
|
- height: 24px;
|
|
|
- .el-input__inner{
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
+ .el-overlay{
|
|
|
+ .el-dialog{
|
|
|
+ margin-top: 10vh;
|
|
|
+ .el-dialog__body{
|
|
|
+ padding: 0px 60px 20px 20px !important;
|
|
|
+ .starttitleSty{
|
|
|
+ border-left: 4px solid #007aab;
|
|
|
+ padding-left: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: '微软雅黑';
|
|
|
+ margin: 20px 0;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .danjuMsg{
|
|
|
- margin-top: 10px;
|
|
|
- .danjuMsg_data{
|
|
|
- margin: 0 0 10px 0;
|
|
|
- .data_tit{
|
|
|
- margin-right: 10px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .data_tit_wd{
|
|
|
- display: inline-block;
|
|
|
- width: 90px;
|
|
|
- }
|
|
|
- .el-form-item--small{
|
|
|
- .el-input{
|
|
|
- height: 25px;
|
|
|
- width: 160px;
|
|
|
+ .el-table{
|
|
|
+ .el-table__body-wrapper{
|
|
|
+ height: 29vh;
|
|
|
+ }
|
|
|
+ .el-table__row{
|
|
|
+ .cell{
|
|
|
+ .el-input{
|
|
|
+ height: 24px;
|
|
|
+ .el-input__inner{
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- margin-bottom: 0;
|
|
|
- .el-input-number{
|
|
|
- height: 25px;
|
|
|
- .el-input-number__decrease, .el-input-number__increase{
|
|
|
- right: -39px;
|
|
|
+ .danjuMsg{
|
|
|
+ margin-top: 10px;
|
|
|
+ .danjuMsg_data{
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ .data_tit{
|
|
|
+ margin-right: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .data_tit_wd{
|
|
|
+ display: inline-block;
|
|
|
+ width: 90px;
|
|
|
+ }
|
|
|
+ .el-form-item--small{
|
|
|
+ .el-input{
|
|
|
+ height: 25px;
|
|
|
+ width: 160px;
|
|
|
+ }
|
|
|
+ margin-bottom: 0;
|
|
|
+ .el-input-number{
|
|
|
+ height: 25px;
|
|
|
+ .el-input-number__decrease, .el-input-number__increase{
|
|
|
+ right: -39px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ .el-select, .el-input{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog__footer{
|
|
|
+ .dialog-footer{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .el-select, .el-input{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
</style>
|