Browse Source

enroll plan - condition style update

hare8999@163.com 1 năm trước cách đây
mục cha
commit
d7a95e3c71
1 tập tin đã thay đổi với 102 bổ sung104 xóa
  1. 102 104
      src/views/career/plan/enrollPlan.vue

+ 102 - 104
src/views/career/plan/enrollPlan.vue

@@ -1,53 +1,48 @@
 <template>
   <div class="plan-container">
-    <el-form label-width="100px" class=" pt20" >
-      <el-form-item label="院校名称:">
-        <div class="fx-row jc-between ai-center">
-          <el-button @click="dialog.visible=true">{{college.name || '添加院校'}}</el-button>
-        </div>
-      </el-form-item>
-    </el-form>
-    <el-divider></el-divider>
-    <div>
+    <div class="mt20">
       <el-card class="box-card">
-        <div >
-            <mx-search-group class="mb10" :hidden="false" :span="6">
-              <el-col :span="4">
-                <el-select v-model="form.year" placeholder="年份">
-                  <el-option
-                    v-for="item in years"
-                    :key="item"
-                    :label="item"
-                    :value="item"
-                  ></el-option>
-                </el-select>
-              </el-col>
-              <el-col :span="4">
-                <el-select v-model="form.type"  placeholder="科类">
-                  <el-option
-                    v-for="item in types"
-                    :key="item"
-                    :label="item"
-                    :value="item"
-                  ></el-option>
-                </el-select>
-              </el-col>
-              <el-button type="primary" class="search-btn" @click="search">{{ '查询'}}</el-button>
-            </mx-search-group>
-            <mx-table :prop-defines="propDefines" :rows="rows">
-              <template #name="{row}">
-                <span class="pointer" @click="toDetail(row)">{{row.universityName}}</span>
-              </template>
-              <template #temp="{row}">
-                  <p>{{`[${row.marjorBelongs}]`}}{{row.marjorName}}</p>
-                  <p class="f-999 f12">{{row.marjorDirection}}</p>
-              </template>
-            </mx-table>
-            <pagination class="mt10" :total="total" :autoScroll="false" @pagination="getList"
-                        :page.sync="pageForm.pageNum"
-                        :limit.sync="pageForm.pageSize"
-            ></pagination>
-        </div>
+        <mx-search-group class="mb10" hidden :span="6">
+          <div class="fx-row ai-cen pr10">
+            <span class="bold f14 mr10">院校名称:</span>
+            <el-button type="primary" plain @click="dialog.visible=true">{{ college.name || '添加院校' }}</el-button>
+          </div>
+          <el-divider direction="vertical" style="margin: 0 10px;" />
+          <el-col :span="4">
+            <el-select v-model="form.year" placeholder="年份">
+              <el-option
+                v-for="item in years"
+                :key="item"
+                :label="item"
+                :value="item"
+              ></el-option>
+            </el-select>
+          </el-col>
+          <el-col :span="4">
+            <el-select v-model="form.type" placeholder="科类">
+              <el-option
+                v-for="item in types"
+                :key="item"
+                :label="item"
+                :value="item"
+              ></el-option>
+            </el-select>
+          </el-col>
+          <el-button type="primary" class="search-btn" @click="search">{{ '查询' }}</el-button>
+        </mx-search-group>
+        <mx-table :prop-defines="propDefines" :rows="rows">
+          <template #name="{row}">
+            <span class="pointer" @click="toDetail(row)">{{ row.universityName }}</span>
+          </template>
+          <template #temp="{row}">
+            <p>{{ `[${row.marjorBelongs}]` }}{{ row.marjorName }}</p>
+            <p class="f-999 f12">{{ row.marjorDirection }}</p>
+          </template>
+        </mx-table>
+        <pagination class="mt10" :total="total" :autoScroll="false" @pagination="getList"
+                    :page.sync="pageForm.pageNum"
+                    :limit.sync="pageForm.pageSize"
+        ></pagination>
       </el-card>
     </div>
     <el-dialog :visible.sync="dialog.visible" width="80%">
@@ -65,104 +60,105 @@ import {
   recruitPlan
 } from '@/api/webApi/shiftLine'
 import transferMixin from '@/components/mx-transfer-mixin'
+
 export default {
-  mixins:[transferMixin],
-  components:{SelectUniversity,MxSearchGroup,MxSelect},
-  data(){
+  mixins: [transferMixin],
+  components: {SelectUniversity, MxSearchGroup, MxSelect},
+  data() {
     return {
       dialog: {
-        visible:false
+        visible: false
       },
-      value:'',
-      college:{},
-      form:{
-        year:'',
-        type:'',
-        universityCode:''
+      value: '',
+      college: {},
+      form: {
+        year: '',
+        type: '',
+        universityCode: ''
       },
-      types:[],
-      years:[],
-      propDefines:{
-        universityName:{
-          label:'院校名称',
-          slot:'name'
+      types: [],
+      years: [],
+      propDefines: {
+        universityName: {
+          label: '院校名称',
+          slot: 'name'
         },
-        collegeCode:{
-          label:'院校招生代码'
+        collegeCode: {
+          label: '院校招生代码'
         },
-        marjorName:{
-          label:'招生专业',
-          slot:'temp',
-          width:'200'
+        marjorName: {
+          label: '招生专业',
+          slot: 'temp',
+          width: '200'
         },
-        level:{
-          label:'批次/段'
+        level: {
+          label: '批次/段'
         },
-        course:{
-          label:'选考科目'
+        course: {
+          label: '选考科目'
         },
-        planCount:{
-          label:'计划数'
+        planCount: {
+          label: '计划数'
         },
-        xuezhi:{
-          label:'学制'
+        xuezhi: {
+          label: '学制'
         },
-        xuefei:{
-          label:'学费'
+        xuefei: {
+          label: '学费'
         },
-        planType:{
-          label:'计划类型'
+        planType: {
+          label: '计划类型'
         },
       },
-      pageForm:{
-        pageSize:10,
-        pageNum:1,
+      pageForm: {
+        pageSize: 10,
+        pageNum: 1,
       },
-      total:0,
-      rows:[],
+      total: 0,
+      rows: [],
     }
   },
   created() {
     this.getMajorYears()
   },
   watch: {
-    'form.year':{
+    'form.year': {
       handler(val) {
         this.getMajorLevels()
       }
     }
   },
-  methods:{
-    toDetail(item){
-      this.transferTo('/career/plan/UniversityDetail',{code:item.universityCode})
+  methods: {
+    toDetail(item) {
+      this.transferTo('/career/plan/UniversityDetail', {code: item.universityCode})
     },
     search() {
-      if(this.form.universityCode == ''  ) {
+      if (this.form.universityCode == '') {
         this.$message.warning('请先选择院校')
         return
       }
       this.getList()
     },
-    changeUniversity(data){
+    changeUniversity(data) {
       console.log(data)
-      this.dialog.visible=false
-      this.college=data
+      this.dialog.visible = false
+      this.college = data
       this.form.universityCode = data.code
     },
     getMajorYears() {
       recruitPlanYears().then(res => {
-        this.form.year =res.rows[0]
+        this.form.year = res.rows[0]
         this.years = res.rows
       })
     },
     getMajorLevels() {
-      recruitPlanTypes({year:this.form.year}).then(res => {
-        this.form.type =res.rows[0]
+      recruitPlanTypes({year: this.form.year}).then(res => {
+        this.form.type = res.rows[0]
         this.types = res.rows
       })
     },
     getList() {
-      recruitPlan({...this.form,...this.pageForm}).then(res =>{
+      recruitPlan({...this.form, ...this.pageForm}).then(res => {
         console.log(res)
         this.rows = res.rows
         this.total = res.total
@@ -172,18 +168,20 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.plan-container{
-  .tabs-item{
+.plan-container {
+  .tabs-item {
     cursor: pointer;
     padding: 0 33px;
     border: 1px solid #f2f2f2;
     display: inline-block;
     line-height: 40px;
-    &:hover{
-      color:#47C6A2;
+
+    &:hover {
+      color: #47C6A2;
     }
-    &.bg-primary{
-      background: #47C6A2 ;
+
+    &.bg-primary {
+      background: #47C6A2;
       color: white;
       border: 0px;
     }