feat：[试验管理][预填表单]详情

src/App.vue

@@ -189,7 +189,7 @@ export default {
   }
 
   .detail-content {
-  padding: 10px 10px;
+    padding: 10px 10px;
 
     display: flex;
     justify-content: space-between;
@@ -205,9 +205,10 @@ export default {
       width: 65%;
     }
 
-     .content {
+    .content {
       width: 100%;
     }
+
     .content-title {
       width: 100%;
       background: #f9f9ff;
@@ -309,4 +310,58 @@ export default {
     margin-top: 10px;
   }
 }
+
+/** 基础信息设置tab **/
+
+.edit-container {
+  background: #ffffff !important;
+
+  .edit-top {
+    background: #fff;
+    padding: 10px 20px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+
+    .left-top {
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      img {
+        height: 16px;
+        margin-right: 10px;
+        cursor: pointer;
+      }
+    }
+
+    .center-top {
+
+      display: flex;
+      justify-content: space-between;
+      height: 24px;
+      .is-finish {
+        background: #409eff;
+        border: none;
+        color: #fff;
+      }
+
+      .line {
+        height: 0px;
+        width: 100px;
+        margin-top: 12px;
+        margin-left: 5px;
+        margin-right: 5px;
+        border-top: 1px  solid #d0d0d0;
+      }
+    }
+
+    .right-top {}
+  }
+
+}
 </style>

src/api/business/study/studyFormPre.js

@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+
+//列表
+export function studyFormPre_list(query) {
+  return request({
+    url: '/system/business/studyFormPre/list',
+    method: 'get',
+    params: query
+  })
+}
+
+//详情
+export function studyFormPre_info(query) {
+  return request({
+    url: '/system/business/studyFormPre/info',
+    method: 'get',
+    params: query
+  })
+}
+
+//保存
+export function studyFormPre_bc(data) {
+  return request({
+    url: '/system/business/studyFormPre/bc',
+    method: 'post',
+    data: data
+  })
+}
+
+//提交
+export function studyFormPre_tj(data) {
+  return request({
+    url: '/system/business/studyFormPre/tj',
+    method: 'post',
+    data: data
+  })
+}
+

src/views/business/study/comp/enter.vue

@@ -1,21 +1,16 @@
 <template>
   <div class="study-enter">
     <div class="content-list">
-      <div class="search-box">
-        <div
-          class="search-item"
-          :class="active === item.key ? 'active' : ''"
-          v-for="(item, index) in tabList"
-          :key="index"
-          @click="changeTab(item)"
-        >
+      <div class="search-box" v-show="!showDetailYt">
+        <div class="search-item" :class="active === item.key ? 'active' : ''" v-for="(item, index) in tabList"
+          :key="index" @click="changeTab(item)">
           {{ item.name }}
         </div>
       </div>
 
       <div class="content-box">
-        <ytbd v-if="active==='ytbd'" :study="study" />
-        <tbbd v-if="active==='tbbd'" :study="study" />
+        <ytbd v-if="active === 'ytbd'" :study="study" @showDetail="showDetailCallbackYt" />
+        <tbbd v-if="active === 'tbbd'" :study="study" />
       </div>
     </div>
   </div>
@@ -27,29 +22,33 @@ import tbbd from './tbbd.vue'
 export default {
   name: 'StudyEnter',
   props: {},
-  components: {ytbd,tbbd},
+  components: { ytbd, tbbd },
   computed: {},
   filters: {},
   data() {
     return {
+      showDetailYt: false,
       tabList: [
-        { key: 'ytbd', name: this.$t('page.business.study.studyEnter.ytbdlb')},
+        { key: 'ytbd', name: this.$t('page.business.study.studyEnter.ytbdlb') },
         { key: 'tbbd', name: this.$t('page.business.study.studyEnter.tbbdlb') },
         { key: 'syxx', name: this.$t('page.business.study.studyEnter.syxx') },
         { key: 'wzlb', name: this.$t('page.business.study.studyEnter.wzlb') },
         { key: 'syff', name: this.$t('page.business.study.studyEnter.syfflb') },
-        { key: 'syj', name: this.$t('page.business.study.studyEnter.syjsygl')}
+        { key: 'syj', name: this.$t('page.business.study.studyEnter.syjsygl') }
       ],
       active: 'ytbd',
 
-      study:{},
+      study: {},
     }
   },
-  created() {},
+  created() { },
   methods: {
-    show(row){
+    show(row) {
       this.study = row
     },
+    showDetailCallbackYt(val) {
+      this.showDetailYt = val
+    },
     changeTab(item) {
       if (this.active !== item.key) {
         this.active = item.key
@@ -69,29 +68,34 @@ export default {
     display: flex;
     flex-direction: row;
     align-items: center;
+
     .search-item {
       padding: 10px 20px;
       font-size: 14px;
       cursor: pointer;
+
       &.active {
         background: #1890ff;
         color: #fff;
       }
+
       &:hover {
         background: #46a6ff;
         color: #fff;
       }
+
       &:first-child {
         border-top-left-radius: 3px;
         border-bottom-left-radius: 3px;
       }
+
       &:last-child {
         border-top-right-radius: 3px;
         border-bottom-right-radius: 3px;
       }
     }
   }
-  .content-box {
-  }
+
+  .content-box {}
 }
 </style>

src/views/business/study/comp/ytbd.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="study-ytbd">
-    <div class="ytbd-left">
+    <div class="ytbd-left" v-show="!showDetail">
       <sbject :study="study" />
     </div>
-    <div class="ytbd-right">
-      <ytbdList :study="study" />
+    <div class="ytbd-right" >
+      <ytbdList :study="study" @showDetail="showDetailCallback"/>
     </div>
   </div>
 </template>
@@ -27,10 +27,15 @@ export default {
   filters: {},
   data() {
     return {
+      showDetail:false
     }
   },
   created() {},
   methods: {
+    showDetailCallback(val){
+      this.showDetail=val
+      this.$emit('showDetail',val)
+    }
   }
 }
 </script>

src/views/business/study/comp/ytbd/Bj.vue

@@ -0,0 +1,132 @@
+G<template>
+  <div>
+    <div class="edit-container">
+      <div class="edit-top">
+        <div class="left-top">
+          <img src="@/assets/images/back.png" @click="cancel()" />
+          <div class="left-title"></div>
+        </div>
+        <div class="center-top">
+          <div>
+            <div class="el-step__icon is-text is-finish">
+              <div class="el-step__icon-inner">1</div>
+            </div>
+            基础设置
+          </div>
+          <div class="line"></div>
+          <div>
+            <div class="el-step__icon is-text">
+              <div class="el-step__icon-inner">2</div>
+            </div>
+            表单设计
+          </div>
+        </div>
+        <div class="right-top">
+          <el-button @click="cancel()">{{ $t('form.cancel') }}</el-button>
+          <el-button @click="save">暂存</el-button>
+          <el-button type="primary" @click="next">下一步</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { studyFormPre_bj, studyFormPre_tj } from "@/api/business/study/studyFormPre"
+import { mapGetters } from 'vuex'
+
+export default {
+  name: "Bj",
+  components: {},
+  data() {
+    return {
+      open: false,
+      form: {},
+      rules: {
+        mc: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }],
+        bh: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }],
+        nd: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }],
+        nddw: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }],
+        sxrq: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }],
+        cctj: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }],
+        ccwz: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }],
+        qmrmm: [{
+          required: true,
+          message: ' ',
+          trigger: 'blur'
+        }],
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'nickName'
+    ]),
+  },
+  created() {
+  },
+  methods: {
+    cancel() {
+      this.$emit('close')
+    },
+    reset() {
+      this.form = {
+        id: null,
+        studyId: null,
+        bdbh: null,
+        bdmc: null,
+        bdsm: null,
+        templateId: null,
+        templateMc: null,
+        bdnr: null
+      }
+      this.resetForm("form")
+    },
+    edit(row) {
+      this.reset()
+      if (row) {
+        this.form = row
+      }
+      this.open = true
+    },
+    save() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          bj(this.form).then(response => {
+            this.open = false
+            this.$emit('callback')
+          })
+        }
+      })
+    }
+  }
+}
+</script>

src/views/business/study/comp/ytbdList.vue

@@ -1,117 +1,136 @@
 <template>
-  <div class="ytbd-list">
-    <div class="ytbd-search">
-      <el-form :model="searchForm" ref="searchForm" :inline="true">
-        <el-form-item :label="$t('page.business.form.bdmc')" prop="name">
-          <el-input v-model="searchForm.name" :placeholder="$t('form.placeholderInput')" clearable style="width: 150px" @keyup.enter.native="search" />
-        </el-form-item>
-        <el-form-item :label="$t('page.business.form.bdbh')" prop="sn">
-          <el-input v-model="searchForm.sn" :placeholder="$t('form.placeholderInput')" clearable style="width: 150px" @keyup.enter.native="search" />
-        </el-form-item>
-        <el-form-item :label="$t('page.business.form.gsr')" prop="ownerName">
-          <el-input v-model="searchForm.ownerName" :placeholder="$t('form.placeholderInput')" clearable style="width: 150px" @keyup.enter.native="search" />
-        </el-form-item>
-         <el-form-item :label="$t('page.business.form.xtmbmc')" prop="templateName">
-          <el-input v-model="searchForm.templateName" :placeholder="$t('form.placeholderInput')" clearable style="width: 150px" @keyup.enter.native="search" />
-        </el-form-item>
-
-        <el-form-item :label="$t('page.business.form.cjsj')">
-          <el-date-picker v-model="daterange" clearable type="daterange" range-separator="-" :start-placeholder="$t('page.business.form.startDate')"
-            :end-placeholder="$t('page.business.form.endDate')" value-format="yyyy-MM-dd" @change="search" style="width: 220px" />
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('form.search') }}</el-button>
-          <el-button icon="el-icon-refresh" @click="reset">{{ $t('form.reset') }}</el-button>
-        </el-form-item>
-        
-        <!-- <div>
+  <div>
+    <div class="ytbd-list" v-show="!showDetail">
+      <div class="ytbd-search">
+        <el-form :model="searchForm" ref="searchForm" :inline="true">
+          <el-form-item :label="$t('page.business.form.bdmc')" prop="name">
+            <el-input v-model="searchForm.bdmc" :placeholder="$t('form.placeholderInput')" clearable
+              style="width: 150px" @keyup.enter.native="search" />
+          </el-form-item>
+          <el-form-item :label="$t('page.business.form.bdbh')" prop="sn">
+            <el-input v-model="searchForm.bdbh" :placeholder="$t('form.placeholderInput')" clearable
+              style="width: 150px" @keyup.enter.native="search" />
+          </el-form-item>
+          <el-form-item :label="$t('page.business.form.gsr')" prop="userId">
+            <el-input v-model="searchForm.userId" :placeholder="$t('form.placeholderInput')" clearable
+              style="width: 150px" @keyup.enter.native="search" />
+          </el-form-item>
+          <el-form-item :label="$t('page.business.form.xtmbmc')" prop="templateName">
+            <el-input v-model="searchForm.templateMc" :placeholder="$t('form.placeholderInput')" clearable
+              style="width: 150px" @keyup.enter.native="search" />
+          </el-form-item>
+
+          <el-form-item :label="$t('page.business.form.cjsj')">
+            <el-date-picker v-model="daterange" clearable type="daterange" range-separator="-"
+              :start-placeholder="$t('page.business.form.startDate')"
+              :end-placeholder="$t('page.business.form.endDate')" value-format="yyyy-MM-dd" @change="search"
+              style="width: 220px" />
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('form.search') }}</el-button>
+            <el-button icon="el-icon-refresh" @click="reset">{{ $t('form.reset') }}</el-button>
+          </el-form-item>
+
+          <!-- <div>
           <el-form-item>
             <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('form.search') }}</el-button>
             <el-button icon="el-icon-refresh" @click="reset">{{ $t('form.reset') }}</el-button>
           </el-form-item>
         </div> -->
-      </el-form>
-    </div>
-    <div class="ytbd-content">
-      <el-row class="add-box">
-        <el-col>
-          <el-button type="primary" icon="el-icon-plus" @click="edit(null)" v-hasPermi="['business:study:add']">{{ $t('page.business.form.xzytbd') }}</el-button>
-        </el-col>
-      </el-row>
-
-      <el-table v-loading="loading" :data="list">
-        <el-table-column :label="$t('page.business.form.bh')" prop="sn" />
-        <el-table-column :label="$t('page.business.form.bdmc')" prop="name" />
-        <el-table-column :label="$t('page.business.form.xtmbmc')" prop="templateName" />
-        <el-table-column :label="$t('page.business.form.cjsj')" align="center" prop="createTime" width="140" />
-        <el-table-column :label="$t('page.business.form.cjr')" align="center" prop="ownerName" width="100" />
-
-        <el-table-column :label="$t('page.business.form.status')" prop="status" width="100">
-          <template slot-scope="scope">
-            <span v-if="scope.row.status===1">{{$t('page.business.form.statusTbz')}}</span>
-            <span v-if="scope.row.status===3">{{$t('page.business.form.statusYtj')}}</span>
-            <span v-if="scope.row.status===5">{{$t('page.business.form.statusWtg')}}</span>
-            <span v-if="scope.row.status===10">{{$t('page.business.form.statusYtg')}}</span>
-          </template>
-        </el-table-column>
-
-        
-        <el-table-column :label="$t('form.operate')" fixed="right" align="center" width="200">
-          <template slot-scope="scope">
-            <!-- 详情 -->
-            <el-button type="text" @click="detail(scope.row)" v-hasPermi="['business:study:detail']">{{$t('page.business.form.detail')}}</el-button>
-            <!-- 编辑 -->
-            <el-button type="text" @click="edit(scope.row)" v-hasPermi="['business:study:edit']" v-if="scope.row.status===1">{{$t('page.business.form.edit')}}</el-button>
-            <!-- 审核 -->
-            <el-button type="text" @click="audit(scope.row)" v-hasPermi="['business:study:audit']" v-if="scope.row.status===3 || scope.row.status===5">{{$t('page.business.form.audit')}}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="searchForm.pageNum"
-        :limit.sync="searchForm.pageSize"
-        @pagination="getList"
-      />
+        </el-form>
+      </div>
+      <div class="ytbd-content">
+        <el-row class="add-box">
+          <el-col>
+            <el-button type="primary" icon="el-icon-plus" @click="edit(null)" v-hasPermi="['business:study:add']">{{
+              $t('page.business.form.xzytbd') }}</el-button>
+          </el-col>
+        </el-row>
+
+        <el-table v-loading="loading" :data="list">
+          <el-table-column :label="$t('page.business.form.bh')" prop="bdbh" />
+          <el-table-column :label="$t('page.business.form.bdmc')" prop="bdmc" />
+          <el-table-column :label="$t('page.business.form.xtmbmc')" prop="templateMc" />
+          <el-table-column :label="$t('page.business.form.cjsj')" align="center" prop="createTime" width="140" />
+          <el-table-column :label="$t('page.business.form.cjr')" align="center" prop="userMc" width="100" />
+
+          <el-table-column :label="$t('page.business.form.status')" prop="status" width="100">
+            <template slot-scope="scope">
+              <span v-if="scope.row.bdzt === 1">{{ $t('page.business.form.statusTbz') }}</span>
+              <span v-if="scope.row.bdzt === 3">{{ $t('page.business.form.statusYtj') }}</span>
+              <span v-if="scope.row.bdzt === 5">{{ $t('page.business.form.statusWtg') }}</span>
+              <span v-if="scope.row.bdzt === 10">{{ $t('page.business.form.statusYtg') }}</span>
+            </template>
+          </el-table-column>
+
+
+          <el-table-column :label="$t('form.operate')" fixed="right" align="center" width="200">
+            <template slot-scope="scope">
+              <!-- 详情 -->
+              <el-button type="text" @click="detail(scope.row)" v-hasPermi="['business:study:detail']">{{
+                $t('page.business.form.detail') }}</el-button>
+              <!-- 编辑 -->
+              <el-button type="text" @click="edit(scope.row)" v-hasPermi="['business:study:edit']"
+                v-if="scope.row.status === 1">{{ $t('page.business.form.edit') }}</el-button>
+              <!-- 审核 -->
+              <el-button type="text" @click="audit(scope.row)" v-hasPermi="['business:study:audit']"
+                v-if="scope.row.status === 3 || scope.row.status === 5">{{ $t('page.business.form.audit') }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
+          @pagination="getList" />
+      </div>
     </div>
+    <!-- 编辑 -->
+    <Bj v-show="showDetail" key="Bj" ref="Bj" @close="bjClose" />
   </div>
+
 </template>
 
 <script>
 import {
-  study_list,
-  study_info,
-  study_save,
-  study_delete
-} from '@/api/business/study/study'
+  studyFormPre_list,
+  studyFormPre_info
+} from '@/api/business/study/studyFormPre'
+import Bj from "./ytbd/Bj";
 export default {
   name: 'YtbdList',
   props: {
-    study:{
-      type:Object,
-      default:()=>{
+    study: {
+      type: Object,
+      default: () => {
         return {}
       }
     }
   },
-  components: {},
-  computed: {},
-  filters: {},
+  watch: {
+    study: {
+      handler(newVal) {
+        this.searchForm.studyId = newVal.id
+        this.search()
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  components: { Bj },
   data() {
     return {
-      daterange:[],
+      showDetail: false,
+      daterange: [],
       searchForm: {
         pageNum: 1,
         pageSize: 10,
-        sn:'',
-        name:'',
-        ownerName:'',
-        templateName:'',
-        startDate:'',
-        endDate:'',
+        studyId: '',
+        bdbh: '',
+        bdmc: '',
+        userId: '',
+        templateMc: '',
+        startDate: '',
+        endDate: '',
       },
 
       loading: false,
@@ -119,24 +138,43 @@ export default {
       list: [],
     }
   },
-  created() {},
+  created() { },
   methods: {
-    search(){
-
+    search() {
+      this.searchForm.pageNum = 1
+      this.getList()
     },
-    reset(){
+    reset() {
 
     },
-    getList(){
-
+    getList() {
+      if (this.daterange != null && this.daterange.length > 0) {
+        this.searchForm.startDate = this.daterange[0]
+        this.searchForm.endDate = moment().add(this.daterange[1], 'days').format('YYYY-MM-DD');
+      } else {
+        this.searchForm.startDate = ''
+        this.searchForm.endDate = ''
+      }
+      this.loading = true
+      studyFormPre_list(this.searchForm).then(response => {
+        this.list = response.rows
+        this.total = response.total
+        this.loading = false
+      })
     },
-    edit(row){
-
+    edit(row) {
+      this.showDetail=true
+      this.$emit('showDetail',this.showDetail)
+      this.$refs.Bj.edit(row)
+    },
+    bjClose(){
+      this.showDetail=false
+      this.$emit('showDetail',this.showDetail)
     },
-    detail(row){
+    detail(row) {
 
     },
-    audit(row){
+    audit(row) {
 
     },
   }
@@ -144,18 +182,21 @@ export default {
 </script>
 <style lang="scss" scoped>
 .ytbd-list {
-  .ytbd-search{
+  .ytbd-search {
     background: #fff;
     padding: 20px;
     margin-bottom: 10px;
-    .right-btn{
-      text-align:right
+
+    .right-btn {
+      text-align: right
     }
   }
-  .ytbd-content{
+
+  .ytbd-content {
     padding: 20px;
     background: #fff;
-    .add-box{
+
+    .add-box {
       margin-bottom: 10px;
     }
   }