wish-web

#直接下载项目
git clone https://gitee.com/jbqc/wish-web.git

#安装前端依赖文件 类似后端的mavne
npm install

#运行项目
npm run dev

#打包代码
npm run build

├── /src/            # 源码目录
│ ├── /_types/       # 类型定义文件
│ ├── /api/          # 请求接口文件
│ ├── /assets/       # 组件静态资源(图片)
│ ├── /components/   # 公共组件
│ ├── /framework/    # 框架配置
│ ├── /i18n/         # 国际化文件
│ ├── /kit/          # 一些工具类的存放
│ ├── /layouts/      # 文件布局
│ ├── /router/       # 路由配置
│ ├── /store/        # vuex状态管理
│ ├── /styles/       # 样式文件
│ ├── /views/        # 路由组件（页面文件）
│ ├── App.vue        # 组件入口
│ └── main.js        # 程序入口
├── .gitignore       # git忽略文件
├── index.html       # 页面入口
├── package.json     # 项目依赖
├── README.md        # 项目文档
├── tsconfig.json    # ts配置文件
└── vite.config.ts   # vite的配置文件

/**
 * @author light_dust_generator
 * @since 2021-06-25 11:39:25
 */
import { ModelApi } from "/@/_types/api";

class DemoApi extends ModelApi {
    //...这里可以重写父类方法,也可以增加新的方法
}
const demoApi = new DemoApi("/org/demo", "demoId");

export default demoApi;

/**
 * @author light_dust_generator
 * @since 2021-06-25 11:39:25
 */
export default {
    demoTableTitle: '演示表格',
    demoId:'主键',
    demoName:'演示名称',
    demoDesc:'演示描述',
    demoDate:'演示时间',
    demoPerson:'演示人',
    //提示
    formPlhDemoId:'请输入主键',
    formPlhDemoName:'请输入演示名称',
    formPlhDemoDesc:'请输入演示描述',
    formPlhDemoDate:'请输入演示时间',
    formPlhDemoPerson:'请输入演示人',
    //校验
    formRuleDemoId:'主键为必填项',
    //表单头部
    addDemoTitle: '新建演示',
    editDemoTitle: '编辑演示'
}

/**
 * @author light_dust_generator
 * @since 2021-06-25 11:39:25
 */
import { t } from '/@/i18n/index'

export const demoTableColumns =[
    { title: t('org.demo.demoId'), key: "demoId", dataIndex: "demoId"},
    { title: t('org.demo.demoName'), key: "demoName", dataIndex: "demoName",slots: { customRender: "customDemoId" } },
    { title: t('org.demo.demoDesc'), key: "demoDesc", dataIndex: "demoDesc"},
    { title: t('org.demo.demoDate'), key: "demoDate", dataIndex: "demoDate"},
    { title: t('org.demo.demoPerson'), key: "demoPerson", dataIndex: "demoPerson"},
]

//查询字段
export const demoQueryColumns = [
]

//表单必填规则
export const demoFormRule = {
    demoId: [{ required: true, message: t('org.demo.formRuleDemoId') }],
}

//这个对应路由
export const demoIndexPageUrl = "/org/demo/list";
export const demoAddPageUrl = "/org/demo/add";
export const demoEditUrl = "/org/demo/edit/";

├── /demo/            		# demo文件夹
│ ├── /component/     		# 类型定义文件
| |── |── demoList.vue		列表组件
| |── |── demoForm.vue		表单组件
│ ├── index.vue       		# 路由上的列表页
│ ├── from.vue        		#路由上的表单页

<template>
  <qc-page-table ref="demoPageTableRef" :columns="columns"  :loadData="loadData" :rowKey="(record) => record[primaryKey]">
    <template #toolbarTitle>
      {{ t("org.demo.demoTableTitle") }}
    </template>
    <template #toolbarButton>
      <qc-add-button @click="addButtonClick"></qc-add-button>
      <qc-delete-button @click="deleteButtonClick"></qc-delete-button>
    </template>
    <template #customDemoId="{ text, record }">
      <qc-link :url="demoEditUrl + record[primaryKey]">
        {{ text }}
      </qc-link>
    </template>
  </qc-page-table>
</template>
<script lang='ts'>
import { defineComponent,onMounted,  reactive, ref, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import demoApi from "/@/api/org/demo";
import {demoTableColumns,demoQueryColumns,demoAddPageUrl,demoEditUrl} from "../interface";
import { useModelPageTable } from "/@/kit/model-kit";
export default defineComponent({
  name: "DemoList",
  setup(props) {
    const { t } = useI18n();
    const router = useRouter();
    const demoPageTableRef = ref();
    //这个是自己定义的一个表格方法 之前是直接对表格做封装太笼统了 现在使用这种api的方式使得更容易拆分 好处自己体会吧
    const {primaryKey,searchTable,reloadTable,loadData,deleteSelectData} = useModelPageTable(demoPageTableRef, demoApi, );
    const demoState = reactive({
      demoEditUrl,
      columns: demoTableColumns,
      primaryKey,
      loadData,
      addButtonClick: () => router.push({ path: demoAddPageUrl }),
      deleteButtonClick: () => deleteSelectData(),
    });
    onMounted(() => searchTable());
    return {
      t,
      ...toRefs(demoState),
      demoPageTableRef,
      searchTable,
    };
  },
});
</script>

<template>
  <a-form ref="demoFormRef" :model="demoModel" :rules="demoFormRule" v-bind="layout">
    <a-form-item name="demoId" :label="t('org.demo.demoId')">
        <a-input v-model:value="demoModel.demoId" :placeholder="t('org.demo.formPlhDemoId')" />
    </a-form-item>
    <a-form-item name="demoName" :label="t('org.demo.demoName')">
        <a-input v-model:value="demoModel.demoName" :placeholder="t('org.demo.formPlhDemoName')" />
    </a-form-item>
    <a-form-item name="demoDesc" :label="t('org.demo.demoDesc')">
        <a-input v-model:value="demoModel.demoDesc" :placeholder="t('org.demo.formPlhDemoDesc')" />
    </a-form-item>
    <a-form-item name="demoDate" :label="t('org.demo.demoDate')">
        <a-input v-model:value="demoModel.demoDate" :placeholder="t('org.demo.formPlhDemoDate')" />
    </a-form-item>
    <a-form-item name="demoPerson" :label="t('org.demo.demoPerson')">
        <a-input v-model:value="demoModel.demoPerson" :placeholder="t('org.demo.formPlhDemoPerson')" />
    </a-form-item>
  </a-form>
</template>
<script lang='ts'>
import { defineComponent, ref } from "vue";
import demoApi from "/@/api/org/demo";
import { demoFormRule,demoEditUrl } from "../interface";
import { useModelForm } from "/@/kit/model-kit";
import { useI18n } from "vue-i18n";
export default defineComponent({
  props: {
   demoId: String,
  },
  setup(props, { emit }) {
    const { t } = useI18n();
    const demoFormRef = ref();
    const demoModel = ref({});

    const { save } = useModelForm(demoFormRef, demoModel, props.demoId, demoApi)
        //提交方法
    const onSubmit = () => save().then((res) => emit('submitSuccess', res.data.data))
    const layout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 15 },
    };
    return {
      t,
      demoFormRef,
      demoModel,
      demoFormRule,
      layout,
      onSubmit,
    };
  },
});
</script>

/**
 * @author light_dust_generator
 * @since 2021-06-25 11:39:25
 */
<template>
  <qc-page-header></qc-page-header>
  <demo-table ref="demoRef"></demo-table>
</template>
<script lang='ts'>
import { defineComponent,ref } from "vue";
import DemoTable from "./component/demo-list.vue";
export default defineComponent({
  components: {DemoTable},
  setup() {
        const demoRef=ref();
        return {demoRef}
  },
});
</script>

/**
 * @author light_dust_generator
 * @since 2021-06-25 11:39:25
 */
 <template>
   <qc-page-header @back="goBack"></qc-page-header>
   <a-card :bordered="false" :title="t('org.demo.demoCardTitle')">
     <template #extra>
       <qc-save-button @click="save"></qc-save-button>
     </template>
     <demo-form ref="demoFormRef" :demoId="demoId"></demo-form>
   </a-card>
 </template>
 <script lang='ts'>
 import { computed, defineComponent, reactive, ref, toRefs } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { demoIndexPageUrl } from "./interface";
 import DemoForm from "./component/demo-form.vue";
 export default defineComponent({
   components: {DemoForm},
   setup() {
     const { t } = useI18n();
     const demoFormRef = ref();
     const router = useRouter();
     const formState = reactive({
       demoId: router.currentRoute.value.params.id,
       save: () => demoFormRef.value.onSubmit(),
       goBack: () => router.push({ path: demoIndexPageUrl }),
     });
     return {
       t,
       demoFormRef,
       ...toRefs(formState),
     };
   },
 });
 </script>