ant-design-vue-jeecg/src/views/jeecg/modules/JeecgDemoTabsModal.vue

<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>