根据文档 QBFast:
生成后 然后选择 基础的模板 :
<script lang="tsx">
import { defineComponent, ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import TaoForm from '@/components/tao-form';
import TaoTable from '@/components/tao-table';
import ListTable from '@/pages/template/list-table.vue';
import UserFlow from '@/pages/user/flow.vue';
import i18n from '@/locales/i18n';
import request from '@/utils/request';
// 自定义模板页面
export default defineComponent({
name: 'UserCashIndex',
components: {
TaoTable,
TaoForm,
ListTable,
UserFlow,
},
setup() {
const listTable = ref(null);
const delivery = (id) => {
request
.post('order/delivery', {
id,
})
.then(({ msg }) => {
MessagePlugin.success(msg);
listTable.value.taoTable().show();
});
};
const cancel = (id) => {
request
.post('order/cancel', {
id,
})
.then(({ msg }) => {
MessagePlugin.success(msg);
listTable.value.taoTable().show();
});
};
const finish = (id) => {
request
.post('order/finish', {
id,
})
.then(({ msg }) => {
MessagePlugin.success(msg);
listTable.value.taoTable().show();
});
};
return () => (
<div class="">
<ListTable ref={listTable} opWidth={84} name="Order">
{{
op: ({ row }) => {
return row.status == 0 ? (
<>
<a className="qb-op-btn" onclick={() => delivery(row.id)}>
{i18n.global.t('配送')}
</a>
<a className="qb-op-btn" onclick={() => cancel(row.id)}>
{i18n.global.t('取消')}
</a>
</>
) : row.status == 1?
<>
<a className="qb-op-btn" onclick={() => finish(row.id)}>
{i18n.global.t('完成')}
</a>
</>
:''
;
},
}}
</ListTable>
</div>
);
},
});
</script>
<style lang="less" scoped></style>