Bladeren bron

Signed-off-by: 1004749546@qq.com <1004749546@qq.com>
考评方案提交

1004749546@qq.com 4 jaren geleden
bovenliggende
commit
278be2c8ad

+ 14 - 34
src/views/evaluationPlan/AddEvaModal.vue

@@ -26,6 +26,7 @@
               <v-select
                 ref="orgType"
                 allowClear
+                mode="multiple"
                 @change="scopeTypeChange"
                 v-decorator="[
                   'formData.scopeType',
@@ -40,16 +41,16 @@
           <a-col :span="20">
             <!-- 考评方案说明 -->
             <a-form-item label="考评方案说明:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
-              <a-input
+              <a-textarea
                 allowClear
                 :maxLength="512"
                 Input.TextArea
-                :autosize="{minRows:2}"
+                :autoSize="{minRows:3}"
                 v-decorator="[
                   'formData.remarks',
                   { initialValue: formData.remarks },
                 ]"
-                placeholder="请输入考评方案名称" />
+                placeholder="请输入考评方案说明" />
             </a-form-item>
           </a-col>
         </a-row>
@@ -76,7 +77,7 @@ import {
   saveAuth
 } from '@/api/tenants.js'
 export default {
-  name: 'TenantsModal',
+  name: 'AddEvaModal',
   components: {
     STable,
     VSelect
@@ -86,7 +87,7 @@ export default {
       type: Boolean,
       default: false
     },
-    // 要编辑的租户id
+    // 要编辑的方案id
     itemId: {
       type: [String, Number],
       default: ''
@@ -106,57 +107,34 @@ export default {
   },
   data () {
     return {
-      isshow: this.visible,
+      isshow: this.visible, // 弹框显示隐藏
       form: this.$form.createForm(this, {
-        name: 'tenantsModal'
+        name: 'AddEvaModal'
       }),
       formData: {
         name: '', // 方案名称
-        scopeType: '', // 适用类型
+        scopeType: [], // 适用类型
         remarks: '' // 方案说明
       }
 
     }
   },
   computed: {
+    // 弹框标题
     titleText () {
       return this.itemId ? '编辑' : '新增'
     }
   },
   methods: {
+    // 点击弹框x号触发事件
     cancel (e) {
       this.clear()
       this.$emit('close')
     },
-    // 有效期改变
-    expireDateChange (v) {
-      console.log(v)
-      this.form.setFields({
-        'formData.expireDate': {
-          value: v,
-          errors: ''
-        }
-      })
-    },
     // 使用权限改变
     scopeTypeChange (v) {
       this.formData.scopeType = v
     },
-    // 启用状态切换
-    onStatusChange (v) {
-      console.log(v, 'vvvvvvvvvv')
-    },
-    // 快捷时间处理
-    timeFilter (time) {
-      const now = moment().add(time, 'day').format('YYYY-MM-DD')
-      this.form.setFields({
-        'formData.expireDate': {
-          value: moment(now, 'YYYY-MM-DD'),
-          errors: ''
-        }
-      })
-    },
-
     // 保存提交
     handleSubmit () {
       const _this = this
@@ -199,12 +177,14 @@ export default {
     },
     clear () {
       this.form.resetFields()
+	  // 重置时 下拉框不起作用,对下拉框单独设置
+	  this.form.setFields({ 'formData.scopeType': { value: [], errors: '' } })
     }
 
   },
   beforeCreate () {
     this.form = this.$form.createForm(this, {
-      name: 'tenantsModal'
+      name: 'AddEvaModal'
     })
   }
 

+ 16 - 6
src/views/evaluationPlan/EvaluationPlanList.vue

@@ -35,7 +35,7 @@
       <template slot="action" slot-scope="text, record">
         <a-icon type="edit" class="actionBtn blue" v-if="record.status == '0'" @click="openModal(record)" />
         <a-icon type="delete" class="actionBtn red" v-if="record.status == '0'" @click="delect(record)" />
-        <a-icon type="setting" class="actionBtn orange" @click="delect(record)" />
+        <a-icon type="setting" class="actionBtn orange" @click="handleSet(record)" />
       </template>
       <!-- 启用禁用 -->
       <template slot="enable" slot-scope="text, row">
@@ -43,7 +43,9 @@
       </template>
     </s-table>
     <!-- 新增/编辑 弹窗 -->
-    <add-evaModal :itemId="itemId" :visible="openTenantsModal" @refresh="$refs.table.refresh()" @close="openTenantsModal=false"></add-evaModal>
+    <add-evaModal :itemId="itemId" :visible="openAddModal" @refresh="$refs.table.refresh()" @close="openAddModal=false"></add-evaModal>
+    <!-- 设置弹窗 -->
+    <set-evaModal :itemId="itemId" :visible="openSetting" @refresh="$refs.table.refresh()" @close="openSetting=false"></set-evaModal>
   </a-card>
 
 </template>
@@ -58,20 +60,23 @@ import {
   enable
 } from '@/api/tenants.js'
 import addEvaModal from './AddEvaModal.vue'
+import setEvaModal from './SetEvaModal.vue'
 import moment from 'moment'
 export default {
   name: 'EvaluationPlanList',
   components: {
     STable,
     VSelect,
-    addEvaModal
+    addEvaModal,
+    setEvaModal
   },
   data () {
     return {
       moment,
       pageNo: 1,
       pageSize: 10,
-      openTenantsModal: false, // 打开授权弹窗
+      openAddModal: false, // 打开新增弹窗
+	  openSetting: false, // 打开设置弹窗
       itemId: '', // 要编辑的租户id
       // 查询参数
       queryParam: {
@@ -175,10 +180,10 @@ export default {
         })
       }
     },
-    // 打开授权弹窗
+    // 打开新增弹窗
     openModal (row) {
       this.itemId = row ? row.id : ''
-      this.openTenantsModal = true
+      this.openAddModal = true
     },
     // 删除
     delect (row) {
@@ -200,6 +205,11 @@ export default {
         }
       })
     },
+    // 打开设置弹框
+    handleSet (row) {
+      this.openSetting = true
+	  console.log(this.openSetting)
+    },
     // 重置
     reset () {
       this.queryParam = {

+ 381 - 0
src/views/evaluationPlan/SetEvaModal.vue

@@ -0,0 +1,381 @@
+<template>
+  <div>
+    <a-modal class="modalBox" title="选择考评项" v-model="isshow" @cancle="cancel" :width="'80%'">
+      <a-row :gutter="24">
+        <a-col class="title" :span="20">
+          <!-- 考评方案名称 -->
+          <span >考评方案名称:</span>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-form :form="form" ref="form" @submit="handleSubmit">
+          <a-card>
+            <a-col :span="15">
+              <p>已选考评项目:</p>
+              <!-- 已选考评项列表 -->
+              <s-table
+                ref="table"
+                size="default"
+                :rowKey="(record) => record.id"
+                :columns="columns"
+                :data="loadData"
+                bordered>
+                <!-- 操作 -->
+                <template slot="action" slot-scope="text, record, index">
+                  <a-button
+                    type="primary"
+                    ghost
+                    size="small"
+                    class="actionBtn"
+                    @click="moveUp(index)"
+                    v-if="index>0"
+                    icon="arrow-up">上移</a-button>
+                  <a-button
+                    type="primary"
+                    ghost
+                    size="small"
+                    class="actionBtn"
+                    @click="moveDown(index)"
+                    v-if="index < checkedList.length-1"
+                    icon="arrow-down">下移</a-button>
+                  <a-button
+                    type="danger"
+                    ghost
+                    size="small"
+                    class="actionBtn"
+                    @click="moveTop(index)"
+                    v-if="index>0"
+                    icon="up">置顶</a-button>
+                  <a-button
+                    type="danger"
+                    ghost
+                    size="small"
+                    class="actionBtn"
+                    @click="moveBottom(index)"
+                    v-if="index < checkedList.length-1"
+                    icon="down">置底</a-button>
+                </template>
+              </s-table>
+
+            </a-col>
+            <a-col span="1" class="divider">
+            </a-col>
+            <a-col span="8">
+              <a-row>
+                <p>请选择需要的考评项目:</p>
+              </a-row>
+              <s-table
+                ref="tableItem"
+                size="default"
+                columnTitle="选择"
+                hideDefaultSelections
+                :row-selection="rowSelection"
+                :rowKey="(record) => record.id"
+                :columns="itemColumns"
+                :data="loadItemData"
+                bordered>
+                <!-- 启用禁用 -->
+                <template slot="enable" slot-scope="text, row">
+                  <span :class="[text==1 ? 'green' : 'grey']">{{ text==1 ? '启用' : '禁用' }}</span>
+                </template>
+              </s-table>
+            </a-col>
+          </a-card>
+          <a-form-item class="footer" :wrapper-col="{ span: 24, offset: 12 }">
+            <a-button type="primary" @click="handleSubmit()">
+              保存
+            </a-button>
+            <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()">
+              取消
+            </a-button>
+          </a-form-item>
+        </a-form>
+      </a-row>
+
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import {
+  STable,
+  VSelect
+} from '@/components'
+import {
+  saveAuth,
+  getTenantsList
+} from '@/api/tenants.js'
+export default {
+  name: 'AddEvaModal',
+  components: {
+    STable,
+    VSelect
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 要编辑的方案id
+    itemId: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  watch: {
+    visible (newValue, oldValue) {
+      this.isshow = newValue
+    },
+    isshow (newValue, oldValue) {
+      if (newValue) {
+
+      } else {
+        this.cancel()
+      }
+    }
+  },
+  computed: {
+    rowSelection () {
+      return {
+        onChange: (selectedRowKeys, selectedRows) => {
+          // if (this.checkedList.length) {
+          //   return this.checkedList
+          // }
+          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+        },
+        getCheckboxProps: record => ({
+          props: {
+            disabled: record.status == '0', // 禁用状态不可选
+            checked: this.checkedList.find(item => item.id == record.id) // 默认是否选中
+          }
+        })
+      }
+    }
+  },
+  data () {
+    return {
+      isshow: this.visible, // 弹框显示隐藏
+      form: this.$form.createForm(this, {
+        name: 'SetEvaModal'
+      }),
+      formData: {
+        name: '', // 方案名称
+        scopeType: [], // 适用类型
+        remarks: '' // 方案说明
+      },
+      // 已选考评项数据
+      checkedList: [], // 已选考评项列表
+      // 表头
+      columns: [{
+        title: '序号',
+        dataIndex: 'no',
+        width: '40',
+        align: 'center'
+      },
+      {
+        title: '考评项目名称',
+        dataIndex: 'name',
+        align: 'center'
+      },
+      {
+        title: '操作',
+        width: '200',
+        align: 'center',
+        scopedSlots: {
+          customRender: 'action'
+        }
+      }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getTenantsList(Object.assign(parameter, this.itemId)).then(res => {
+          if (res.status == 200) {
+            const no = (res.data.pageNo - 1) * res.data.pageSize
+            for (let i = 0; i < res.data.list.length; i++) {
+              const _item = res.data.list[i]
+              _item.no = no + i + 1
+              _item.status = _item.status + '' === '1'
+            }
+            this.checkedList = res.data.list
+            return res.data
+          }
+        })
+      },
+      // 考评项列表
+      itemColumns: [
+        {
+          title: '考评项目名称',
+          dataIndex: 'name',
+          align: 'center'
+        },
+        {
+          title: '状态',
+          width: '200',
+		  dataIndex: 'status',
+          align: 'center',
+          scopedSlots: {
+            customRender: 'enable'
+          }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadItemData: parameter => {
+        return getTenantsList(Object.assign(parameter, this.itemId)).then(res => {
+          if (res.status == 200) {
+            const no = (res.data.pageNo - 1) * res.data.pageSize
+            for (let i = 0; i < res.data.list.length; i++) {
+              const _item = res.data.list[i]
+              _item.no = no + i + 1
+              _item.status = _item.status + '' === '1'
+            }
+            return res.data
+          }
+        })
+      }
+    }
+  },
+  methods: {
+    // 点击弹框x号触发事件
+    cancel (e) {
+      this.clear()
+      this.$emit('close')
+    },
+    // 上移
+    moveUp (index) {
+      this.moveArr(index, index - 1)
+    },
+    // 下移
+    moveDown (index) {
+      this.moveArr(index, index + 1)
+    },
+    // 置顶
+    moveTop (index) {
+      this.goToArr(index, 1)
+    },
+    // 置底
+    moveBottom (index) {
+      this.goToArr(index, 0)
+    },
+    // 置顶和置底
+    goToArr (index, type) {
+      const arr = this.checkedList
+      const row = arr[index]
+      arr.splice(index, 1)
+      if (type) {
+        arr.unshift(row)
+      } else {
+        arr.push(row)
+      }
+	  arr.map((item, index) => {
+	   item.no = index + 1
+	  })
+    },
+    // 移动
+    moveArr (index1, index2) {
+      const arr = this.checkedList
+      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
+	  arr.map((item, index) => {
+		  item.no = index + 1
+	  })
+      this.checkedList = arr
+    },
+    // 选中检测项目,并过滤未选择的禁止项目
+    checkJcItem () {
+	    const a = this.jcfaItemList
+	    const b = this.jcItemList
+	    const d = []
+	    const c = []
+
+	    b.map((item, index) => {
+	      const has = a.findIndex(k => { return k.id == item.id })
+	      // 如果存在
+	      if (has >= 0) {
+	        item.checked = true
+	        c.push(item)
+	      } else {
+	        // 禁用去掉
+	        if (item.itemState === '1') {
+	          d.push(item)
+	        }
+	      }
+	    })
+
+	    // console.log(d)
+	    this.jcItemList = c.concat(d)
+    },
+    // 保存提交
+    handleSubmit () {
+      const _this = this
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log(values.formData, ' formData.type222222222')
+          // const params = Object.assign({
+          //   id: this.itemData.id
+          // }, values.formData)
+          // params.expireDate = moment(params.expireDate).format('YYYY-MM-DD')
+          // console.log(params, 'ppppppppppppp')
+          // saveAuth(params).then(res => {
+          //   console.log(res, 'res--save')
+          //   if (res.status + '' === '200') {
+          //     this.$message.success(res.message ? res.message : '保存成功')
+          //     this.$emit('refresh')
+          //     setTimeout(function () {
+          //       _this.cancel()
+          //     }, 300)
+          //   } else {
+          //     // this.$message.warning(res.message)
+          //   }
+          // })
+        }
+      })
+    },
+    // 取消
+    handleCancel () {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '确定取消吗?',
+        okText: '确定',
+        cancelText: '取消',
+        onOk () {
+          _this.clear()
+          _this.cancel()
+        }
+      })
+    },
+    clear () {
+      this.form.resetFields()
+    }
+
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this, {
+      name: 'SetEvaModal'
+    })
+  }
+
+}
+</script>
+
+<style scoped>
+	.title {
+		font-size: 16px;
+		color: black;
+		padding-bottom: 30px;
+	}
+	.actionBtn {
+		font-size: 12px;
+		margin: 0 5px;
+	}
+
+	.green {
+		color: #16b50e;
+	}
+
+	.grey {
+		color: rgb(153, 153, 153);
+	}
+	.footer{
+		margin-top: 20px;
+	}
+</style>