{"_id":"kouxiangtang","_rev":"187-31d67be6e70a743fb1d0e4cfd224d9c7","name":"kouxiangtang","dist-tags":{"beta":"0.1.36-beta.0","latest":"0.1.65"},"versions":{"0.0.1":{"name":"kouxiangtang","version":"0.0.1","_id":"kouxiangtang@0.0.1","maintainers":[{"name":"lnz013","email":"lnz013@qq.com"}],"dist":{"shasum":"cdbcaf3d1a80b6843249c460987b20f72765d706","tarball":"https://registry.npmjs.org/kouxiangtang/-/kouxiangtang-0.0.1.tgz","fileCount":9,"integrity":"sha512-3OKakUZrOHbn6HTNeRsJ3Y8I43EtB7BrMEcb2K9Y6UFpB4CR/d6Xznx4PXwdNvyh/4QSX96GNobT1uzDACgohQ==","signatures":[{"sig":"MEUCIQD8D2gOzZIZdqU8cVrdLd38mbDGyV8sdvi8JxukDAjw1AIgF68FHkEhUjY3Paw84alY70w68IZXC74PDwE7LDeFZps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2143748},"main":"./dist/kouxiangtang.umd.cjs","type":"module","module":"./dist/kouxiangtang.js","exports":{".":{"import":"./dist/kouxiangtang.js","require":"./dist/kouxiangtang.umd.cjs"},"./dist/*.css":{"import":"./dist/*.css","require":"./dist/*.css"}},"gitHead":"72109b1a38303d9cd1cca4dbe1f0bc8912e1d45b","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"lnz013","email":"lnz013@qq.com"},"_npmVersion":"10.1.0","description":"This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `\r\n\r\n \r\n ```\r\n * side-menus.js ,用于项目菜单管理。\r\n\r\n ``` javascript\r\n import {\r\n House,\r\n PieChart,\r\n Refrigerator,\r\n Setting,\r\n Location\r\n } from \"@element-plus/icons-vue\";\r\n\r\n const adminMenus = [\r\n { title: \"首页\", home: true, icon: House, route: \"/admin/home\" },\r\n { title: \"统计\", home: true, icon: PieChart, route: \"/admin/statistics\" },\r\n {\r\n title: \"用户\",\r\n icon: User,\r\n children: [\r\n { title: \"用户\", route: \"/admin/user/list\" },\r\n { title: \"SSO\", route: \"/admin/user-sso/list\" },\r\n { title: \"城市用户统计\", route: \"/admin/city-users/list\" },\r\n { title: \"信息更正申请\", route: \"/admin/identity-update-apply/list\" },\r\n { title: \"登录日志\", route: \"/admin/user-login-ip/list\" },\r\n { title: \"黑名单\", route: \"/admin/black-list/list\" },\r\n ],\r\n }\r\n ];\r\n\r\n export default {\r\n admin: adminMenus,\r\n };\r\n\r\n ```\r\n\r\n * UserProfile.vue\r\n\r\n ``` HTML\r\n \r\n\r\n \r\n \r\n ```\r\n\r\n\r\n### （三）每个领域模型都有列表页\r\n\r\n\r\n页面文件夹下fields.js\r\n * 字段为列表，详情，编辑 通用字段\r\n * 可通过`editable: true,`等属性控制具体的页面显示。`showInList: false,`等。\r\n\r\n ``` JAVASCRIPT\r\n import SSOTenant from \"./components/SSOTenant.vue\";\r\n import bannerTypes from \"@/constants/banner-types\";\r\n\r\n const fields = [\r\n {\r\n code: \"id\",\r\n label: \"ID\",\r\n rowQuery: (row) => {\r\n return { stationCode: row.code };\r\n },\r\n },\r\n {\r\n code: \"indexLetter\",\r\n label: \"索引\",\r\n width: 50,\r\n editable: true,\r\n showInList: false,\r\n },\r\n {\r\n code: \"enabled\",\r\n label: \"启用\",\r\n type: \"boolean\",\r\n width: 60,\r\n editable: true,\r\n },\r\n {\r\n code: \"mode\",\r\n label: \"首页模版\",\r\n editable: true,\r\n type: \"select\",\r\n options: () =>\r\n bannerTypes.filter((item) => {\r\n return item.code?.toString().charAt(0) == 6;\r\n }),\r\n width: 150,\r\n },\r\n { code: \"createdAt\", label: \"创建时间\" },\r\n { code: \"updatedAt\", label: \"更新时间\" },\r\n ];\r\n\r\n export default fields;\r\n\r\n ```\r\n\r\n### （四）每个领域模型都有详情页\r\n```javascript\r\n {\r\n code: \"id\",\r\n label: \"ID\",\r\n rowQuery: (row) => {\r\n return { stationCode: row.code };\r\n },\r\n },\r\n```\r\n\r\n### （五）每个领域模型根据 `API` 接口情况提供标准的增删改查的操作\r\n页面文件夹下rest.js\r\n * 为领域下的接口请求，`getList` `update` `create` 等。\r\n\r\n ``` JAVASCRIPT\r\n import http from \"@/utils/http\";\r\n\r\n function getList(data) {\r\n return http.get(\"stations\", data).then((res) => ({ data: res }));\r\n }\r\n\r\n function getOne({ id }) {\r\n return http.get(`stations/${id}`).then((res) => ({ data: res }));\r\n }\r\n\r\n function update(station) {\r\n return http.put(`stations/${station.id}`, station);\r\n }\r\n\r\n function create(station) {\r\n return http.post(\"stations\", station);\r\n }\r\n\r\n function getBound(data) {\r\n return http.get(\"station-customers/binds\", data);\r\n }\r\n\r\n function getUnbound() {\r\n return http.get(\"station-customers/unbound\");\r\n }\r\n\r\n function updateStationCustomers(data) {\r\n return http.put(`station-customers/${data.id}/bind`, data);\r\n }\r\n\r\n function removeStationCustomers(id) {\r\n return http.remove(`station-customers/${id}/bind`);\r\n }\r\n\r\n function bindStationCustomers(data) {\r\n return http.post(`station-customers/bind`, data);\r\n }\r\n\r\n export default {\r\n getList,\r\n getOne,\r\n update,\r\n create,\r\n getBound,\r\n getUnbound,\r\n updateStationCustomers,\r\n removeStationCustomers,\r\n bindStationCustomers,\r\n };\r\n\r\n\r\n ```\r\n\r\n### （六）列表页提供可配置的数据过滤方式\r\n页面文件夹下filters.js\r\n * 为领域下的设置搜索条件。\r\n ``` JAVASCRIPT\r\n import http from \"@/utils/http\";\r\n\r\n const filters = {\r\n name: {\r\n name: \"名称\",\r\n },\r\n cityCode: {\r\n name: \"城市\",\r\n },\r\n enabled: {\r\n name: \"启用\",\r\n type: \"boolean\",\r\n },\r\n defaultStation: {\r\n name: \"默认\",\r\n type: \"boolean\",\r\n },\r\n hasLocalService: {\r\n name: \"开通服务\",\r\n type: \"boolean\",\r\n },\r\n isPriority: {\r\n name: \"重要客户\",\r\n type: \"boolean\",\r\n },\r\n };\r\n\r\n export default filters;\r\n\r\n ```\r\n### （七）提供针对列表页数据集的批量操作（`PageAction`）\r\n页面文件夹下page-actions.js\r\n * 为列表数据集的批量操作。\r\n ``` JAVASCRIPT\r\n import Test from \"./components/Test.vue\";\r\n\r\n const pageActions = [\r\n {\r\n name: \"敏感词测试\",\r\n component: Test,\r\n },\r\n ];\r\n\r\n export default pageActions;\r\n\r\n ```\r\n### （八）提供针对单条数据的操作（`RowAction`）\r\n页面文件夹下row-actions.js\r\n * 为针对单挑数据操作。\r\n ``` JAVASCRIPT\r\n import RegionEditor from \"./components/ToExamine.vue\";\r\n\r\n const rowActions = [\r\n {\r\n component: RegionEditor,\r\n isVisible: (data) => {\r\n return true;\r\n },\r\n },\r\n ];\r\n\r\n export default rowActions;\r\n ```\r\n### （九）提供针对数据关联的显示\r\n\r\n * 从属于：`belongs-to`\r\n \r\n * 为跳转到其他功能的详情页面。\r\n ``` JAVASCRIPT\r\n {\r\n code: \"messageRuleId\",\r\n label: \"规则名称\",\r\n width: 150,\r\n type: \"belongs-to\",\r\n belongsTo: \"message-send-rule\",\r\n },\r\n\r\n ```\r\n * `belongs-to`对应为目标功能页面的code\r\n ``` JAVASCRIPT\r\n export default defineDomain(\"admin\", {\r\n name: \"消息发送规则\",\r\n code: \"message-send-rule\",\r\n fields,\r\n filters,\r\n rest,\r\n hasMany: [\"message-push\"],\r\n });\r\n\r\n ```\r\n\r\n * 一对多：`has-many`。 \r\n * 功能页面 `config.js` 配置 `hasMany` ，对应为此功能页面的子功能。\r\n * 可以为系统内的任何其他功能页面，hasMany对应数组，item为子功能的code。\r\n\r\n ``` JAVASCRIPT\r\n import { defineDomain } from \"kouxiangtang\";\r\n import rest from \"./rest.js\";\r\n import fields from \"./fields.js\";\r\n import filters from \"./filters.js\";\r\n import rowActions from \"./row-actions.js\";\r\n\r\n export default defineDomain(\"admin\", {\r\n name: \"资产\",\r\n code: \"currency\",\r\n fields,\r\n rest,\r\n filters,\r\n rowActions,\r\n actionsWidth: 240,\r\n hasMany: [\"account\", \"asset-details\", \"rewards-rules\"],\r\n });\r\n\r\n ```\r\n * 如下图\r\n ![alt text](https://bloodcare-1251596343.cos.ap-shanghai.myqcloud.com/assets/mdImage/image-8.png)\r\n### （十）组件的使用\r\n页面文件夹下`components`\r\n\r\n ![alt text](https://bloodcare-1251596343.cos.ap-shanghai.myqcloud.com/assets/mdImage/image-7.png)\r\n* 使用组件示例。\r\n\r\n``` JAVASCRIPT\r\n import Approved from \"./components/Approved.vue\";\r\n\r\n const rowActions = [\r\n {\r\n component: Approved,\r\n isVisible: (data) => {\r\n return true;\r\n },\r\n },\r\n ];\r\n\r\n export default rowActions;\r\n```\r\n\r\n\r\n\r\n","readmeFilename":"README.md"}