更新创建表单样式

config/prod.env.js

 module.exports = {
   NODE_ENV: '"production"',
-  API_HOST: '"http://biw-mt.vip.vip.com"',
+  API_HOST: '"http://vue.jinchangxiao.com"',
   API_PORT: '""',
-  JANUS_HOST: '"http://vup-janus.vip.vip.com"',
+  JANUS_HOST: '"http://vue.jinchangxiao.com"',
   JANUS_PORT: '""'
 }

src/ajax.js

@@ -7,7 +7,11 @@ let config = {
   ajaxOption: {
     method: dev ? 'GET' : 'POST',
     dataType: 'json',
-    contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
+    contentType: 'application/json'
+    // xhrFields: {
+    //   withCredentials: true
+    // }
+    // contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
   },
 
   token: {
@@ -44,8 +48,8 @@ let setUrlK = (o) => {
   return params
 }
 export function requestAPI (option, data) {
-  let params = { data: JSON.stringify(data) }
-  return ajax.requestAPI(option, params)
+  // let params = { data: JSON.stringify(data) }
+  return ajax.requestAPI(option, data)
 }
 
 export function requestWithJsonAPI (option, data) {

src/assets/css/app.scss

@@ -2,4 +2,20 @@
   .mb20 {
     margin-bottom:20px;
   }
+  .el-button--cancel {
+    color:white;
+    background-color: #EB7567;
+    border-color: #e86150;
+  }
+  .el-button--confirm {
+    color:white;
+    background-color:#649FD7;
+    border-color:#5092d2;
+  }
+  .el-dialog__header {
+    background-color: #333744;
+  }
+  .el-dialog__title {
+    color:white;
+  }
 }

src/components/common/singleItemMixin.js

+export default {
+  data () {
+    return {
+      item: '',
+      timeItem: '',
+      inputSelectItem: 'rmb'
+    }
+  },
+  props: {
+    formItem: {
+      type: String
+    },
+    formTimeItem: {
+      type: String
+    },
+    label: {
+      type: String
+    },
+    optionsList: Array,
+    tips: {
+      type: String
+    },
+    formInputSelect: {
+      type: String
+    },
+    formInputSelectOptions: Array,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    rows: {
+      type: Number
+    },
+    prepend: {
+      type: Object,
+      default () {
+        return {
+          icon: '',
+          text: ''
+        }
+      }
+    },
+    append: {
+      type: Object,
+      default () {
+        return {
+          icon: '',
+          text: ''
+        }
+      }
+    }
+  },
+  watch: {
+    'formItem' (val) {
+      console.log(val)
+      this.item = val
+    },
+    'formTimeItem' (val) {
+      this.timeItem = val
+    },
+    'formInputSelect' (val) {
+      this.inputSelectItem = val
+    },
+    'item' (val) {
+      this.$emit('update:item', val)
+    },
+    'timeItem' (val) {
+      this.$emit('update:item', val)
+    },
+    'inputSelectItem' (val) {
+      this.$emit('update:inputSelect', val)
+    }
+  }
+}

src/components/common/singleRadio.vue

+<template>
+  <section>
+    <el-radio-group size="small" v-model="item">
+      <el-radio-button v-for="(radio, key) in optionsList" :key="key" :label="radio.name" :value="radio.value"></el-radio-button>
+    </el-radio-group>
+  </section>
+</template>
+
+<script>
+  import itemMixin from './singleItemMixin'
+  export default {
+    name: 'single-radio',
+    mixins: [itemMixin]
+  }
+</script>
+
+<style>
+  .el-radio-button__inner, .el-radio-button:last-child .el-radio-button__inner, .el-radio-button:first-child .el-radio-button__inner{
+    border-left: 1px solid #DCDFE6;
+    margin: 0 10px 5px 0;
+    border-radius: 6px!important;
+  }
+  .el-radio-button__inner:hover{
+    color: #333;
+    background-color: #e6e6e6;
+    border-color: #adadad;
+  }
+  .el-radio-button__orig-radio:checked+.el-radio-button__inner{
+    color: #fff;
+    background-color: #3c3c3c;
+    border-color: #373737;
+    box-shadow: 0 0 0 0 #373737;
+  }
+  .el-radio-button__orig-radio:checked+.el-radio-button__inner:hover{
+    color: #333;
+    background-color: #d4d4d4;
+    border-color: #8c8c8c;
+  }
+</style>

src/components/schedule/scheduleForm.vue

@@ -80,17 +80,19 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="是否共享" prop="is_public" class="ec-clear-left is-required">
-        <el-radio-group v-model="model.is_public" size="small">
-          <el-radio :label="1" border>共享</el-radio>
-          <el-radio :label="0" border>私人</el-radio>
-        </el-radio-group>
+      <el-form-item label="是否共享" prop="is_public" class="ec-clear-left">
+        <single-radio
+          :form-item="model.is_public"
+          :options-list="is_public_array"
+          @update:item="val => {model.is_public = val}">
+        </single-radio>
       </el-form-item>
     </el-form>
   </section>
 </template>
 <script>
 import depSelect from './depSelect'
+import singleRadio from '../common/singleRadio'
 import settingMixin from '../common/settingMixin'
 export default {
   name: 'scheduleForm',
@@ -102,7 +104,8 @@ export default {
   },
 
   components: {
-    depSelect
+    depSelect,
+    singleRadio
   },
 
   data () {
@@ -112,6 +115,16 @@ export default {
           return time.getTime() < Date.now() - 8.64e7
         }
       },
+      is_public_array: [
+        {
+          'name': '共享',
+          'value': 1
+        },
+        {
+          'name': '私人',
+          'value': 0
+        }
+      ],
       rules: {},
       query: {}
     }

src/components/schedule/scheduleModal.vue

@@ -5,15 +5,15 @@
        :model="model">
       </ScheduleForm>
       <div slot="footer" class="dialog-footer" style="text-align: center;">
-        <el-button @click="diaVis = false" size="mini">取 消</el-button>
-        <el-button type="primary" @click="save" size="mini">确 定</el-button>
+        <el-button type="cancel" @click="diaVis = false" size="mini">取 消</el-button>
+        <el-button type="confirm" @click="save" size="mini">确 定</el-button>
       </div>
     </el-dialog>
   </section>
 </template>
 <script>
 import {
-  requestWithJsonAPI,
+  requestAPI,
   api
 } from '@/lib/commonMixin'
 import ScheduleForm from './scheduleForm'
@@ -47,7 +47,7 @@ export default {
 
     save () {
       console.log('this.model', this.model)
-      requestWithJsonAPI(api.saveNewSchedule, this.model)
+      requestAPI(Object.assign({}, api.saveNewSchedule, { method: 'POST' }), this.model)
         .then((res) => {
           console.log(res)
         })
@@ -56,4 +56,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+  .el-dialog .el-dialog__header {
+    background-color: #333744!important;
+  }
+  @include c('dialog-title') {
+  }
 </style>

src/components/schedule_list/scheduleForm.vue

-<template>
-  <section>
-    <el-row :gutter="10" class="header-title">
-      <el-col :span="18">
-        <h2>待办事项</h2>
-      </el-col>
-      <el-col :span="6">
-        <el-input placeholder="关键词" size="small" style="width: 200px;"></el-input>
-        <el-button size="small">搜索</el-button>
-        <el-button type="primary" icon="el-icon-plus" size="small" @click="btnCreate">新建待办事项</el-button>
-      </el-col>
-    </el-row>
-    <el-row class="header-title" style="height:100px;">
-      <el-col :span="4">
-        <div>
-          待办时间
-        </div>
-        <el-input size="small"></el-input>
-      </el-col>
-      <el-col :span="4">
-        <div>
-          状态
-        </div>
-        <el-input size="small"></el-input>
-      </el-col>
-      <el-col :span="4">
-        <div>
-          部门
-        </div>
-        <el-input size="small"></el-input>
-      </el-col>
-      <el-col :span="4">
-        <div>
-          创建人
-        </div>
-        <el-input size="small"></el-input>
-      </el-col>
-      <el-col :span="4">
-        <div>
-          重复
-        </div>
-        <el-input size="small"></el-input>
-      </el-col>
-    </el-row>
-    <ScheduleModal ref="scheduleModal"></ScheduleModal>
-  </section>
-</template>
-<script>
-import ScheduleModal from '../schedule/scheduleModal'
-export default {
-
-  components: {
-    ScheduleModal
-  },
-
-  computed: {
-  },
-
-  data () {
-    return {
-    }
-  },
-
-  methods: {
-    btnCreate () {
-      this.$refs.scheduleModal.show()
-    }
-  }
-}
-</script>
-<style scoped lang="scss">
-.el-input {
-  width:67%;
-}
-</style>

src/components/schedule_list/scheduleHome.vue

@@ -7,7 +7,7 @@
         :search-key="'ClientSearch'"
         :add-title="'新建待办事项'"
         @update:headerSearch="search => searchKeyword(search)"
-        @update:headerAdd="addNewUser">
+        @update:headerAdd="() => add()">
       </search-header>
       <search-form
         ref="clientForm"
@@ -26,6 +26,7 @@
         :total="result.pagenation.totalcount">
       </Pagenation>
     </div>
+    <ScheduleModal ref="scheduleModal"></ScheduleModal>
   </section>
 </template>
 
@@ -33,6 +34,7 @@
 import SearchHeader from '../common/searchHeader'
 import SearchForm from '../common/SearchForm'
 import ScheduleItem from '../common/scheduleItem'
+import ScheduleModal from '../schedule/scheduleModal'
 import Pagenation from './schedulePagenation'
 import {
   requestWithJsonAPI,
@@ -45,6 +47,7 @@ export default {
     SearchHeader,
     SearchForm,
     ScheduleItem,
+    ScheduleModal,
     Pagenation
   },
 
@@ -77,10 +80,6 @@ export default {
       this.getScheduleList()
     },
 
-    addNewUser () {
-      this.$router.push({path: '/clientAdd'})
-    },
-
     searchKeyword (search) {
       this.updateForm(search)
     },
@@ -96,7 +95,7 @@ export default {
       })
     },
 
-    show () {
+    add () {
       this.$refs.scheduleModal.show()
     },