合并

Your Name

2022-09-08 5a1616f169d75ece07d2d12a8edac3e5f660a920

 src/views/goalManagement/processForms/component/formInformationTops.vue

@@ -0,0 +1,162 @@
<template>
   <el-form ref="form" :model="form" label-width="120px">
      <el-row>
         <el-col :span="11">
            <el-form-item label="安全目标指标" size="default">
               <el-input v-model="form.name"></el-input>
            </el-form-item>
         </el-col>
         <el-col :span="11" :offset="2">
            <el-form-item label="目标指标编号" size="default">
               <el-input v-model="form.name"></el-input>
            </el-form-item>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="11">
            <el-form-item label="年度" size="default">
               <el-input v-model="form.name"></el-input>
            </el-form-item>
         </el-col>
         <el-col :span="11" :offset="2">
            <el-form-item label="责任部门" size="default">
               <el-input v-model="form.name"></el-input>
            </el-form-item>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="11">
            <el-form-item label="改进期限" size="default">
               <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
            </el-form-item>
         </el-col>
         <el-col :span="11" :offset="2">
            <el-form-item label="发起人" size="default">
               <el-input v-model="form.name"></el-input>
            </el-form-item>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="11">
            <el-form-item label="发起时间" size="default">
               <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
            </el-form-item>
         </el-col>
      </el-row>
   </el-form>
   <el-tabs v-model="activeName" style="padding: 0 20px">
      <el-tab-pane label="考核指标" name="1">
         <el-table :data="tableData" style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="70" />
            <el-table-column align="center" prop="date" label="责任部门" />
            <el-table-column align="center" prop="name" label="考核指标" />
            <el-table-column align="center" prop="address" label="制定部门" />
            <el-table-column align="center" prop="address" label="制定日期" />
            <el-table-column align="center" label="检查值">
               <template #default>
                  <el-input v-model="form.name" placeholder=""></el-input>
               </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="检查人" />
            <el-table-column align="center" prop="address" label="检查时间" />
         </el-table>
         <div class="tiao">
            <div class="typeS">审批</div>
         </div>
         <el-row style="padding: 20px 0">
            <el-col :span="6" style="text-align: right">一级审批：</el-col>
            <el-col :span="18">同意</el-col>
         </el-row>
         <el-row style="padding: 0 0 20px 0">
            <el-col :span="6"></el-col>
            <el-col :span="18"><span class="logoColor">同意</span><span style="margin-right: 8px">杜建喜</span><span>2021-05-24 04:47:42</span></el-col>
         </el-row>
      </el-tab-pane>
   </el-tabs>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
   setup() {
      const form = reactive({
         name: '',
         region: '',
         date1: '',
         date2: '',
         delivery: false,
         type: [],
         resource: '',
         desc: '',
      });
      const tableData = [
         {
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
         },
      ];
      const activeName = ref('1');
      return {
         form,
         tableData,
         activeName,
      };
   },
});
</script>
<style scoped>
.title {
   text-align: center;
   font-size: 16px;
   margin-bottom: 20px;
}
.box {
   border: 1px solid #dcdfe6;
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
   background-color: #fff;
}
.tiao {
   width: 100%;
   height: 1px;
   background-color: #dcdfe6;
   margin: 30px 0;
   position: relative;
}
.typeS {
   width: 80px;
   background-color: #fff;
   position: absolute;
   left: 30px;
   top: -9px;
   font-size: 14px;
   text-align: center;
}
.logoColor {
   background-color: #67c23a;
   color: #fff;
   padding: 5px 8px;
   border-radius: 5px;
   margin-right: 5px;
}
.btns {
   width: 100%;
   padding: 20px 0;
   background-color: #fff;
   position: fixed;
   bottom: 0px;
   left: 0px;
   text-align: center;
   box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
}
.title2 {
   padding: 20px 0 20px 10px;
   width: 100%;
   border: 1px solid #dcdfe6;
}
.el-row{
   padding:20px 0 0px 0;
}
</style>