<template>
|
<a-modal
|
:title="title"
|
:width="1200"
|
:visible="visible"
|
:confirmLoading="confirmLoading"
|
@ok="handleOk"
|
@cancel="handleCancel"
|
cancelText="关闭">
|
|
<a-spin :spinning="confirmLoading">
|
<a-form :form="form">
|
|
<a-card class="card" :bordered="false">
|
<a-row class="form-row" :gutter="16">
|
<a-col :lg="8">
|
<a-form-item label="任务名">
|
<a-input placeholder="请输入任务名称" v-decorator="[ 'task.name', {rules: [{ required: true, message: '请输入任务名称', whitespace: true}]} ]"/>
|
</a-form-item>
|
</a-col>
|
<a-col :lg="8">
|
<a-form-item label="任务描述">
|
<a-input placeholder="请输入任务描述" v-decorator="['task.description', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]"/>
|
</a-form-item>
|
</a-col>
|
<a-col :lg="8">
|
<a-form-item label="执行人">
|
<a-select placeholder="请选择执行人" v-decorator="['task.executor',{rules: [{ required: true, message: '请选择执行人'}]} ]">
|
<a-select-option value="黄丽丽">黄丽丽</a-select-option>
|
<a-select-option value="李大刀">李大刀</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-row class="form-row" :gutter="16">
|
<a-col :lg="8">
|
<a-form-item label="责任人">
|
<a-select placeholder="请选择责任人" v-decorator="['task.manager', {rules: [{ required: true, message: '请选择责任人'}]} ]">
|
<a-select-option value="王伟">王伟</a-select-option>
|
<a-select-option value="李红军">李红军</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :lg="8">
|
<a-form-item label="提醒时间">
|
<a-time-picker style="width: 100%" v-decorator="['task.time', {rules: [{ required: true, message: '请选择提醒时间'}]} ]"/>
|
</a-form-item>
|
</a-col>
|
<a-col :lg="8">
|
<a-form-item
|
label="任务类型">
|
<a-select placeholder="请选择任务类型" v-decorator="['task.type', {rules: [{ required: true, message: '请选择任务类型'}]} ]">
|
<a-select-option value="定时执行">定时执行</a-select-option>
|
<a-select-option value="周期执行">周期执行</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-card>
|
|
<a-tabs defaultActiveKey="1" >
|
<a-tab-pane tab="Tab 1" key="1">
|
|
<a-table :columns="columns" :dataSource="data" :pagination="false" size="middle">
|
<template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
|
<a-tooltip title="必填项" :defaultVisible="false" overlayStyle="{ color: 'red' }">
|
<a-input :key="col" v-if="record.editable" style="margin: -5px 0" :value="text" :placeholder="columns[i].title" @change="e => handlerRowChange(e.target.value, record.key, col)"/>
|
<template v-else>{{ text }}</template>
|
</a-tooltip>
|
</template>
|
<template slot="operation" slot-scope="text, record, index">
|
<template v-if="record.editable">
|
<span v-if="record.isNew">
|
<a @click="saveRow(record.key)">添加</a>
|
<a-divider type="vertical"/>
|
<a-popconfirm title="是否要删除此行？" @confirm="removeRow(record.key)"><a>删除</a></a-popconfirm>
|
</span>
|
<span v-else>
|
<a @click="saveRow(record.key)">保存</a>
|
<a-divider type="vertical"/>
|
<a @click="cancelEditRow(record.key)">取消</a>
|
</span>
|
</template>
|
<span v-else>
|
<a @click="editRow(record.key)">编辑</a>
|
<a-divider type="vertical"/>
|
<a-popconfirm title="是否要删除此行？" @confirm="removeRow(record.key)"><a>删除</a></a-popconfirm>
|
</span>
|
</template>
|
</a-table>
|
|
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newRow">新增成员</a-button>
|
</a-tab-pane>
|
<a-tab-pane tab="Tab 2" key="2" forceRender>
|
Content of Tab Pane 2
|
</a-tab-pane>
|
<a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>
|
</a-tabs>
|
|
</a-form>
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import {httpAction} from '@/api/manage'
|
import pick from 'lodash.pick'
|
import moment from "moment"
|
|
export default {
|
name: "JeecgDemoTabsModal",
|
data() {
|
return {
|
title: "操作",
|
visible: false,
|
model: {},
|
// table
|
columns: [
|
{
|
title: '成员姓名',
|
dataIndex: 'name',
|
key: 'name',
|
width: '20%',
|
scopedSlots: {customRender: 'name'}
|
},
|
{
|
title: '工号',
|
dataIndex: 'workId',
|
key: 'workId',
|
width: '20%',
|
scopedSlots: {customRender: 'workId'}
|
},
|
{
|
title: '所属部门',
|
dataIndex: 'department',
|
key: 'department',
|
width: '40%',
|
scopedSlots: {customRender: 'department'}
|
},
|
{
|
title: '操作',
|
key: 'action',
|
scopedSlots: {customRender: 'operation'}
|
}
|
],
|
data: [
|
{
|
key: '1',
|
name: '小明',
|
workId: '001',
|
editable: false,
|
department: '行政部'
|
},
|
{
|
key: '2',
|
name: '李莉',
|
workId: '002',
|
editable: false,
|
department: 'IT部'
|
},
|
{
|
key: '3',
|
name: '王小帅',
|
workId: '003',
|
editable: false,
|
department: '财务部'
|
}
|
],
|
|
confirmLoading: false,
|
form: this.$form.createForm(this),
|
validatorRules: {},
|
url: {
|
add: "/test/jeecgDemo/add",
|
edit: "/test/jeecgDemo/edit",
|
},
|
}
|
},
|
created() {
|
},
|
methods: {
|
add() {
|
this.edit({});
|
},
|
edit(record) {
|
this.form.resetFields();
|
this.model = Object.assign({}, record);
|
this.visible = true;
|
this.$nextTick(() => {
|
this.form.setFieldsValue(pick(this.model, 'name', 'keyWord', 'sex', 'age', 'email', 'content'))
|
//时间格式化
|
this.form.setFieldsValue({punchTime: this.model.punchTime ? moment(this.model.punchTime, 'YYYY-MM-DD HH:mm:ss') : null})
|
this.form.setFieldsValue({birthday: this.model.birthday ? moment(this.model.birthday) : null})
|
});
|
|
},
|
close() {
|
this.$emit('close');
|
this.visible = false;
|
},
|
handleOk() {
|
const that = this;
|
// 触发表单验证
|
this.form.validateFields((err, values) => {
|
if (!err) {
|
that.confirmLoading = true;
|
let httpurl = '';
|
let method = '';
|
if (!this.model.id) {
|
httpurl += this.url.add;
|
method = 'post';
|
} else {
|
httpurl += this.url.edit;
|
method = 'put';
|
}
|
let formData = Object.assign(this.model, values);
|
//时间格式化
|
formData.punchTime = formData.punchTime ? formData.punchTime.format('YYYY-MM-DD HH:mm:ss') : null;
|
formData.birthday = formData.birthday ? formData.birthday.format() : null;
|
|
console.log(formData)
|
httpAction(httpurl, formData, method).then((res) => {
|
if (res.success) {
|
that.$message.success(res.message);
|
that.$emit('ok');
|
} else {
|
that.$message.warning(res.message);
|
}
|
}).finally(() => {
|
that.confirmLoading = false;
|
that.close();
|
})
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
newRow () {
|
// 通过时间戳生成 UUID
|
let uuid = Math.round(new Date().getTime()).toString();
|
console.log('uuid: '+ uuid)
|
this.data.push({
|
key: uuid,
|
name: '',
|
workId: '',
|
department: '',
|
editable: true,
|
isNew: true
|
})
|
},
|
removeRow (key) {
|
const newData = this.data.filter(item => item.key !== key)
|
this.data = newData
|
},
|
saveRow (key) {
|
let target = this.data.filter(item => item.key === key)[0]
|
target.editable = false
|
target.isNew = false
|
},
|
handlerRowChange (value, key, column) {
|
const newData = [...this.data]
|
const target = newData.filter(item => key === item.key)[0]
|
if (target) {
|
target[column] = value
|
this.data = newData
|
}
|
},
|
editRow (key) {
|
let target = this.data.filter(item => item.key === key)[0]
|
target.editable = !target.editable
|
},
|
cancelEditRow (key) {
|
let target = this.data.filter(item => item.key === key)[0]
|
target.editable = false
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.ant-modal-body {
|
padding: 8px!important;
|
}
|
</style>
|
