QB web 自定义页面

  根据文档 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>

相关推荐

  1. QB web 定义页面

    2024-03-19 16:16:04       25 阅读
  2. vue3中子级页面定调用父级页面定义事件

    2024-03-19 16:16:04       18 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-19 16:16:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-19 16:16:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-19 16:16:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-19 16:16:04       18 阅读

热门阅读

  1. (二)pulsar安装在独立的docker中,python测试

    2024-03-19 16:16:04       19 阅读
  2. python使用excel需要用到哪些模块?

    2024-03-19 16:16:04       20 阅读
  3. 常用的vim和linux命令

    2024-03-19 16:16:04       18 阅读
  4. 代码随想录Day24

    2024-03-19 16:16:04       18 阅读
  5. ElasticSearch简介及常见用法

    2024-03-19 16:16:04       16 阅读
  6. C++ QT串口通信(1)-串口模块QtSerialPort详解

    2024-03-19 16:16:04       20 阅读
  7. 数据库表的查询

    2024-03-19 16:16:04       17 阅读
  8. 每天学习一个Linux命令之rm

    2024-03-19 16:16:04       22 阅读
  9. C语言经典例题 --- 公因数、素数、闰年

    2024-03-19 16:16:04       18 阅读