lg_frontend/components/smallCommon/Curd.vue

<template>
  <div style="text-align: left">
    <div class="table-search">
      <a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch" layout="inline" @change="handleSearchFormChange">
        <a-form-item v-for="menuItem in searchItems" :key="menuItem.key" :label="menuItem.label">
          <a-input
            v-decorator="[menuItem.key]"
            :placeholder="menuItem.placeholder || ''"
            v-if="menuItem.type === 'input'"
          />
          <a-select
            v-decorator="[menuItem.key]"
            :placeholder="menuItem.placeholder || ''"
            v-else-if="menuItem.type === 'select'"
          >
            <a-select-option :value="cItem.value" v-for="cItem in menuItem.children || []" :key="cItem.value">{{ cItem.label }}</a-select-option>
          </a-select>
          <a-range-picker
            :placeholder="menuItem.placeholder || ''"  v-decorator="[menuItem.key]" v-else-if="menuItem.type === 'dateRange'" format="YYYY-MM-DD" />
        </a-form-item>
       <a-form-item>
         <a-button type="primary" html-type="submit">查询</a-button>
         <a-button :style="{ marginLeft: '8px' }" @click="reset">重置</a-button>
       </a-form-item>
      </a-form>
    </div>
    <a-divider />
    <div class="table-operations">
      <a-button @click="addRow" type="primary">
        添加
      </a-button>
    </div>
    <a-table :columns="realColumns" :data-source="tableDataSource" @change="handleChange" >
      <span slot="action" slot-scope="text, record">
        <a-button type="danger" size="small" @click="deleteRow(record)">删除</a-button>
        <a-divider type="vertical" />
        <a-button type="primary" size="small" @click="editRow(record)">编辑</a-button>
      </span>
    </a-table>
    <a-modal
      :title="dialog.title"
      :visible="dialog.visible"
      :confirm-loading="dialog.loading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form class="ant-advanced-search-form" :form="editForm" @submit="handleSearch" @change="handleSearchFormChange">
        <a-form-item v-for="menuItem in formItems" :key="menuItem.key"  :label="menuItem.label">
          <a-input
            v-decorator="[menuItem.key]"
            :placeholder="menuItem.placeholder || ''"
            v-if="menuItem.type === 'input'"
          />
          <a-select
            v-decorator="[menuItem.key]"
            :placeholder="menuItem.placeholder || ''"
            v-else-if="menuItem.type === 'select'"
          >
            <a-select-option
              :placeholder="menuItem.placeholder || ''" :value="cItem.value" v-for="cItem in menuItem.children || []" :key="cItem.value">{{ cItem.label }}</a-select-option>
          </a-select>
          <a-range-picker v-decorator="[menuItem.key]" v-else-if="menuItem.type === 'dateRange'" format="YYYY-MM-DD" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  name: "user",
  data () {
    return {
      tableDataSource: [],
      form: this.$form.createForm(this, { name: `form_${new Date().valueOf()}` }),
      editForm: this.$form.createForm(this, { name: `edit_form_${new Date().valueOf()}` }),
      dialog: {
        title: '',
        visible: false,
        isEdit: '',
        loading: false
      },
      selectRow: null,
      page: {
        pageSize: 10,
        pageNo: 1
      },
      searchFormModel: {}
    }
  },
  props: {
    // 表单内容配置
    formItems: {
      type: Array,
      default: ()=> []
    },
    // 列表列配置
    columns: {
      type: Array,
      default: ()=> []
    },
    primaryKey: {
      type: String,
      default: 'id'
    },

    apiConf: {
      type: Object,
      default: () => ({})
    }


  },
  computed: {
    searchItems () {
      return this.formItems.filter(item => !!item.isSearch)
    },
    realColumns () {
      return [
        ...this.columns,
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          fixed: 'right',
          width: 155
        },
      ]
    }
  },
  watch: {

  },
  mounted() {
    this.handleSearch()
  },
  methods: {
    handleSearchFormChange(changedFields) {
     this.searchFormModel = { ...this.searchFormModel, ...changedFields }
    },
    addRow () {
      this.handleCancel()
      this.dialog.visible = true
    },
    editRow(row) {
      this.selectRow = row
      this.dialog.title = '添加'
      this.dialog.visible = true
      this.dialog.isEdit = true
      this.dialog.loading = false
    },
    deleteRow(row) {
      this.$confirm({
        title: '确认要删除么?',
        okText: '确认',
        okType: 'danger',
        cancelText: '再想想',
        onOk() {
          this.$post(this.apiConf.deleteApi, {
            [this.primaryKey]: row[this.primaryKey],
          })
        }
      });



    },
    handleChange ({ pageSize, pageNo }) {
      this.page.pageSize = pageSize
      this.page.pageNo = pageNo
      this.handleSearch()
    },
    reset() {
      this.form.resetFields();
      },
    async handleSearch(e) {
      e && e.preventDefault();
      const values = this.form.getFieldsValue()
      const { data } = await this.$get(this.apiConf.listApi, {
        ...values,
        pageSize: this.page.pageSize,
        current: this.page.pageNo,
      })
      this.tableDataSource = data.items
    },
    async handleOk() {
      const values = this.editForm.getFieldsValue()
      if (this.dialog.isEdit) {
        await this.$post(this.apiConf.editApi, {
          [this.primaryKey]: this.selectRow[this.primaryKey],
          ...values
        })
      } else {
        debugger
        await this.$post(this.apiConf.addApi, values)
      }
      this.handleCancel()
      this.handleSearch()
    },
    handleCancel() {
      this.editRow = null
      this.dialog.title = '添加'
      this.dialog.visible = false
      this.dialog.isEdit = false
      this.dialog.loading = false
    },
  }
}
</script>
<style scoped lang="less">
.table-operations {
  margin-bottom: 16px;
}
.ant-form-item {
  margin-bottom: 0;
}
.ant-divider-horizontal {
  margin: 16px 0;
}

.table-operations > button {
  margin-right: 8px;
}
</style>