修改页面初始化方法调用

src/apis/element.js

@@ -2,5 +2,10 @@ const urlEnd = '?duplextrans'
 export default {
   getScheduleList: {
     url: '/vue/schedule/list' + urlEnd
+  },
+
+  // 新建待办事项获取下拉列表配置项
+  getSaveNew: {
+    url: '/vue/schedule/get-new' + urlEnd
   }
 }

src/assets/css/app.scss

 .element-app {
   .mb20 {
-    margin-bottom:20px; 
+    margin-bottom:20px;
   }
 }

src/components/common/settingMixin.js

+import {
+  requestWithJsonAPI,
+  api
+} from '@/lib/commonMixin'
+export default {
+  data () {
+    return {
+      createdByArray: []
+    }
+  },
+
+  computed: {
+  },
+
+  methods: {
+    selectKeyFormat (key) {
+      return `Schedules[${key}]`
+    },
+
+    initSetting (params) {
+      let methods = this.$options && this.$options.methods
+      params.forEach(item => {
+        Object.keys(methods).includes(item) && methods[item].call(this)
+      })
+    },
+
+    getNewArray () {
+      requestWithJsonAPI(api.getSaveNew)
+        .then((res) => {
+          return res.options
+        }).then((opt) => {
+          let ret = opt.find(item => item.key === this.selectKeyFormat('created_by'))
+          this.createdByArray = ret && [].concat(ret.value)
+        })
+    }
+  }
+}

src/components/common/singleSelect.vue

@@ -3,12 +3,12 @@
     <div class="el-select">
       <div class="el-input" :class="{'is-disabled': disabled}">
         <i ref="icon" class="el-input__icon el-icon-caret-top" />
-        <input placeholder="请选择" readonly="readonly" :value="textFormat" :disabled="disabled" icon="caret-top" type="text" class="el-input__inner" >
+        <input placeholder="请选择" readonly="readonly" :value="textFormat" :disabled="disabled" icon="caret-top" type="text" class="el-input__inner el-input--small" >
       </div>
 
       <div class="list-wrap" ref="listWrap">
         <div class="search-input">
-          <input type="text" :placeholder="placeholder" v-model="searchText" @input="search">
+          <input type="text" :placeholder="placeholder" v-model="searchText" @input="search" class="el-input--small">
         </div>
 
         <div>
@@ -310,4 +310,33 @@ export default {
 .select-comp-wrap .list-wrap .curr-list {
   padding-bottom: 5px;
 }
+.el-input__icon {
+  position: absolute;
+  width: 35px;
+  height: 100%;
+  right: 0px;
+  top: 0px;
+  text-align: center;
+  color: rgb(191, 203, 217);
+  transition: all 0.3s ease 0s;
+}
+.el-select .el-input .el-input__icon {
+  color: rgb(191, 203, 217);
+  font-size: 12px;
+  transform: translateY(-50%) rotateZ(180deg);
+  line-height: 16px;
+  top: 50%;
+  cursor: pointer;
+  transition: transform 0.3s ease 0s;
+}
+.el-select .el-input .el-input__icon.is-reverse {
+  transform: translateY(-50%);
+}
+.el-input--small {
+  height:28px;
+  line-height:28px;
+}
+.el-input__inner {
+  padding: 3px 0px 0px 15px
+}
 </style>

src/components/schedule/depSelect.vue

+<template>
+  <single-select
+    ref="select"
+    :style="{'width': inputWidth + 'px'}"
+    :text="query[labelKeyName]"
+    :value="query[keyName]"
+    @onSelect="select"
+    :start-load-initial="startLoadInitial"
+    :params-filter="paramsFilter"
+    :data-filter="listFilter"
+    :api-name="apiName" />
+</template>
+
+<script>
+import SingleSelect from '../common/singleSelect.vue'
+
+export default {
+  components: { SingleSelect },
+
+  props: {
+    query: Object,
+    startLoadInitial: {
+      type: Boolean,
+      default: true
+    },
+    updateQuery: {
+      type: Boolean,
+      default: false
+    },
+    keyName: {
+      type: String,
+      default: 'departmentCode'
+    },
+    labelKeyName: {
+      type: String,
+      default: 'departmentName'
+    },
+    inputWidth: {
+      type: Number,
+      default: 250
+    }
+  },
+
+  data () {
+    return {
+      apiName: 'getRmDepartmentList',
+      labelText: '部门'
+    }
+  },
+
+  methods: {
+    loadData (resolve, reject) {
+      if (this.$refs.select) {
+        this.$refs.select.loadData(resolve, reject)
+      } else {
+        reject('DepSelect is not ready and this.$refs.select is null')
+      }
+    },
+    select (item) {
+      this.query[this.keyName] = item.value
+      if (this.query.hasOwnProperty(this.labelKeyName)) {
+        this.query[this.labelKeyName] = item.text
+      }
+      if (this.updateQuery === true) {
+        this.$emit('update:query', JSON.parse(JSON.stringify(this.query)))
+      }
+    },
+
+    paramsFilter (keyword = '') {
+      return {
+        value: keyword.trim()
+      }
+    },
+
+    listFilter (res) {
+      let list = res.list || []
+      return list.map(item => {
+        return {
+          text: item.label,
+          value: item.value
+        }
+      })
+    }
+  }
+}
+</script>

src/components/schedule/scheduleForm.vue

@@ -2,57 +2,58 @@
   <section class="ec-page-wrapper" style="overflow: hidden; padding-bottom: 0px;">
     <el-form label-width="120px" ref="form" :rules="rules" :model="model" class="ec-create-form">
       <el-form-item label="客户名称" prop="actName" class="ec-clear-left">
-        <el-input
-          class="ec-input-normal"
-          size="mini"
-          v-model.trim="model.actMsg">
-        </el-input>
+        <dep-select
+         :query="query"
+         :inputWidth="340"
+         :startLoadInitial="false"/>
       </el-form-item>
-      <el-form-item label="待办事项内容" prop="actMsg" class="ec-clear-left ec-form-item-lg">
+      <el-form-item label="待办事项内容" prop="actMsg" class="ec-clear-left ec-form-item-lg is-required">
         <el-input
           class="ec-input-normal"
-          size="mini"
           type="textarea"
           :rows="2"
-          v-model.trim="model.actMsg">
+          v-model.trim="model.schedule_title">
         </el-input>
         <span class="tips">待办事项内容不能为空</span>
       </el-form-item>
       <el-form-item label="待办时间" prop="actName" class="ec-clear-left">
-        <el-input
-          class="ec-input-normal"
-          size="mini"
-          v-model.trim="model.actMsg">
-        </el-input>
+        <el-date-picker
+          size="small"
+          v-model="model.time_type"
+          type="datetime"
+          placeholder="选择日期时间">
+        </el-date-picker>
       </el-form-item>
       <el-form-item label="开始时间" prop="actName" class="ec-clear-left">
-        <el-input
-          class="ec-input-normal"
-          size="mini"
-          v-model.trim="model.actMsg">
-        </el-input>
+        <el-date-picker
+          size="small"
+          v-model="model.start_at"
+          type="datetime"
+          placeholder="选择日期时间">
+        </el-date-picker>
       </el-form-item>
       <el-form-item label="结束时间" prop="actName" class="ec-clear-left">
-        <el-input
-          class="ec-input-normal"
-          size="mini"
-          v-model.trim="model.actMsg">
-        </el-input>
+        <el-date-picker
+          size="small"
+          v-model="model.end_at"
+          type="datetime"
+          placeholder="选择日期时间">
+        </el-date-picker>
       </el-form-item>
       <el-form-item label="提醒时间" prop="actName" class="ec-clear-left">
-        <el-input
-          class="ec-input-normal"
-          size="mini"
-          v-model.trim="model.actMsg">
-        </el-input>
+        <el-date-picker
+          size="small"
+          v-model="model.alarm_before"
+          type="datetime"
+          placeholder="选择日期时间">
+        </el-date-picker>
       </el-form-item>
       <el-form-item label="备注" prop="actMsg" class="ec-clear-left ec-form-item-lg">
         <el-input
           class="ec-input-normal"
-          size="mini"
           type="textarea"
           :rows="2"
-          v-model.trim="model.actMsg">
+          v-model.trim="model.description">
         </el-input>
       </el-form-item>
       <el-form-item label="重复" prop="actName" class="ec-clear-left">
@@ -63,30 +64,40 @@
         </el-input>
       </el-form-item>
       <el-form-item label="负责人" prop="actName" class="ec-clear-left">
-        <el-input
-          class="ec-input-normal"
-          size="mini"
-          v-model.trim="model.actMsg">
-        </el-input>
+        <el-select v-model="model.created_by" placeholder="请选择">
+          <el-option
+            v-for="item in createdByArray"
+            :key="item.key"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
       </el-form-item>
-      <el-form-item label="是否共享" prop="actName" class="ec-clear-left">
-        <el-input
-          class="ec-input-normal"
-          size="mini"
-          v-model.trim="model.actMsg">
-        </el-input>
+      <el-form-item label="是否共享" prop="actName" 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>
     </el-form>
   </section>
 </template>
 <script>
-// import SingleSelect from '@/components/common/singleSelect'
+import depSelect from './depSelect'
+import settingMixin from '../common/settingMixin'
 export default {
   name: 'fullCutForm',
 
+  mixins: [settingMixin],
+
+  props: {
+    model: Object
+  },
+
   components: {
-    // SingleSelect
+    depSelect
   },
+
   data () {
     return {
       activateTimeStrRules: {
@@ -94,32 +105,34 @@ export default {
           return time.getTime() < Date.now() - 8.64e7
         }
       },
-      model: {},
-      rules: {}
+      rules: {},
+      query: {}
     }
   },
 
   created () {
+    // this.initSetting(['getNewArray'])
     if (this.isCreate) {
       this.queryOaDeptViaJanus()
     }
   },
 
   mounted () {
-    if (this.isEdit) {
-      let id = this.$route.params.id
-      this.getActById(id)
-    }
+    this.initSetting(['getNewArray'])
+    // if (this.isEdit) {
+    //   let id = this.$route.params.id
+    //   this.getActById(id)
+    // }
   },
 
   computed: {
-    isCreate () {
-      return this.pageType === 'create'
-    },
-
-    isEdit () {
-      return this.pageType === 'edit'
-    }
+    // isCreate () {
+    //   return this.pageType === 'create'
+    // },
+    //
+    // isEdit () {
+    //   return this.pageType === 'edit'
+    // }
   },
 
   methods: {
@@ -193,7 +206,7 @@ export default {
     span { color: red; }
   }
   .ec-input-normal {
-    width: 295px;
+    width: 340px;
   }
   .ec-input-small {
     width: 195px;
@@ -222,6 +235,6 @@ export default {
     padding-left: 10px;
   }
   .el-form-item {
-    margin-bottom:0px; 
+    margin-bottom:5px;
   }
 </style>

src/components/schedule/scheduleModal.vue

 <template>
   <section>
     <el-dialog title="新建待办事项" :visible.sync="diaVis" :modal-append-to-body="false">
-      <ScheduleForm></ScheduleForm>
+      <ScheduleForm
+       :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="diaVis = false" size="mini">确 定</el-button>
@@ -19,7 +21,12 @@ export default {
 
   data () {
     return {
-      diaVis: false
+      diaVis: false,
+      model: {
+        client_id: '',
+        schedule_title: '',
+        created_by: '' // 负责人
+      }
     }
   },