parking/plop-templates/view/index.hbs

<template>
  <div class="default-main" >
    <el-row :gutter="20">
      <el-col :span="24" :lg="24" :xl="24" :md="24" :xs="24" :sm="24">
        <el-card class="el-card is-hover-shadow" header="职务列表">
          <!-- style="height:calc(100vh - 107px);"-->
          <el-row>
            <el-col :span="24">
              <!-- 表格顶部菜单 -->
              <TableHeader :buttons="['refresh', 'add', 'edit', 'delete']" quick-search-placeholder="通过职务名称模糊搜索"
                @action="baTable.onTableHeaderAction" />

              <Table @action="baTable.onTableAction" />
            </el-col>

            <!-- 表单 -->
            <PopupForm ref="formRef" />

          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { provide, ref, reactive, toRefs, onMounted, watch } from 'vue'
import baTableClass from '/@/utils/baTable'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import PopupForm from './popupForm.vue'
import { sysPos } from '/@/api/controllerUrls'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'

import { ElForm } from 'element-plus'

const baTable = new baTableClass(
    new baTableApi(sysPos),
    {
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: '名称', prop: 'name', align: 'center', operator: false },
            { label: '唯一编码', prop: 'code', align: 'center', operator: false },
            { label: '排序', prop: 'sort', align: 'center', operator: false },
            { label: '备注', prop: 'remark', align: 'center', operator: false },
            {
                label: '操作',
                align: 'center',
                width: '100',
                render: 'buttons',
                buttons: defaultOptButtons(['edit', 'delete']),
                operator: false,
            },
        ],
        dblClickNotEditColumn: [undefined, 'status'],
    },
    {
        defaultItems: {},
    },
    {
        // 提交前
        onSubmit: (params: { formEl: InstanceType<typeof ElForm> }) => {
            var items = cloneDeep(baTable.form.items!)

            // 表单验证通过后执行的api请求操作
            let submitCallback = () => {
                baTable.form.submitLoading = true
                baTable.api
                    .postData(baTable.form.operate!, items)
                    .then((res) => {
                        baTable.onTableHeaderAction('refresh', {})
                        baTable.form.submitLoading = false
                        baTable.form.operateIds?.shift()
                        if (baTable.form.operateIds?.length! > 0) {
                            baTable.toggleForm('edit', baTable.form.operateIds)
                        } else {
                            baTable.toggleForm()
                        }
                        baTable.runAfter('onSubmit', { res })
                    })
                    .catch((err) => {
                        baTable.form.submitLoading = false
                    })
            }

            if (params.formEl) {
                baTable.form.ref = params.formEl
                params.formEl.validate((valid) => {
                    if (valid) {
                        submitCallback()
                    }
                })
            } else {
                submitCallback()
            }
            return false
        },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.mount()
    baTable.getIndex()
})
</script>

<script lang="ts">
import { defineComponent } from 'vue'
import { cloneDeep, String } from 'lodash'
export default defineComponent({
    name: 'organizational/post',
})
</script>


<style scoped>
</style>