Browse Source

前端更新

master
wanggang 1 year ago
parent
commit
d01c121a1d
  1. 51
      code/WebApp/vanilla/components/form/form-item.js
  2. 28
      code/WebApp/vanilla/components/list/index.js
  3. 1
      code/WebApp/vanilla/index.html
  4. 8
      code/WebApp/vanilla/lib/async-validator/index.min.js
  5. 56029
      code/WebApp/vanilla/lib/element-plus/index.full.mjs
  6. 62
      code/WebApp/vanilla/models/code-setting.js
  7. 11
      code/WebApp/vanilla/models/login.js
  8. 38
      code/WebApp/vanilla/models/user.js
  9. 2
      code/WebApp/vanilla/router/routes.js
  10. 49
      code/WebApp/vanilla/utils/validation.js

51
code/WebApp/vanilla/components/form/form-item.js

@ -1,7 +1,6 @@
import html from "html"; import html from "html";
import { defineAsyncComponent, ref, reactive, watch } from "vue"; import { defineAsyncComponent, ref, reactive, watch } from "vue";
import { format } from "../../utils/index.js"; import { getRules } from "../../utils/validation.js";
import { messages } from "../../utils/validation.js";
export default { export default {
name: "formItem", name: "formItem",
@ -14,7 +13,7 @@ export default {
:title="prop" :title="prop"
:label="schema.title" :label="schema.title"
:prop="getProp(prop)" :prop="getProp(prop)"
:rules="getRules(parentSchema,schema,model)" :rules="getDisabled()?[]:getRules(parentSchema,schema,model)"
:error="mode==='query'?null:getError(prop)" :error="mode==='query'?null:getError(prop)"
> >
<app-form-input :schema="schema" :prop="prop" v-model="model" :mode="mode" /> <app-form-input :schema="schema" :prop="prop" v-model="model" :mode="mode" />
@ -39,6 +38,15 @@ export default {
} }
return true; return true;
}; };
const getDisabled = () => {
if (props.mode === "details") {
return true;
}
if (props.mode === "update" && props.schema.readOnly) {
return true;
}
return false;
};
// //
const getProp = (prop) => { const getProp = (prop) => {
return prop; return prop;
@ -47,48 +55,13 @@ export default {
const getError = (prop) => { const getError = (prop) => {
return props.errors[prop]; return props.errors[prop];
}; };
//
const getRules = (parentSchema, property, data) => {
if (props.mode === "query" || props.mode === "details" || !property.rules) {
return null;
}
const rules = [...(Array.isArray(property.rules) ? property.rules : [property.rules])].map((o) =>
JSON.parse(JSON.stringify(o))
);
Object.values(rules).forEach((rule) => {
rule.data = data;
rule.schema = parentSchema;
rule.title = rule.title ?? property.title;
rule.type = property.type;
if (rule.validator) {
rule.validator = validators[rule.validator];
}
if (!rule.message) {
if (rule.required) {
rule.message = format(messages.required, property.title);
} else if (rule.pattern) {
rule.message = format(messages.pattern, property.title);
} else if (property.type === "string" || property.type === "number" || property.type === "array") {
if (rule.len) {
rule.message = format(messages[property.type].len, property.title, rule.len);
} else if (rule.min) {
rule.message = format(messages[property.type].min, property.title, rule.min);
} else if (rule.max) {
rule.message = format(messages[property.type].max, property.title, rule.max);
} else if (rule.range) {
rule.message = format(messages[property.type].range, property.title, rule.range);
}
}
}
});
return rules;
};
/*end*/ /*end*/
return { return {
model, model,
showItem, showItem,
getProp, getProp,
getError, getError,
getDisabled,
getRules, getRules,
}; };
}, },

28
code/WebApp/vanilla/components/list/index.js

@ -3,11 +3,12 @@ import request, { get, post } from "../../request/index.js";
import { defineAsyncComponent, ref, reactive, onMounted } from "vue"; import { defineAsyncComponent, ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { listToTree, schemaToModel, importFunction } from "../../utils/index.js"; import { listToTree, schemaToModel, importFunction, format } from "../../utils/index.js";
import qs from "../../lib/qs/shim.js"; import qs from "../../lib/qs/shim.js";
import VueOfficeExcel from "@vue-office/excel"; import VueOfficeExcel from "@vue-office/excel";
import { camelCase, capitalize } from "lodash"; import { camelCase, capitalize } from "lodash";
import { useAppStore } from "../../store/index.js"; import { useAppStore } from "../../store/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
export default { export default {
name: "AppList", name: "AppList",
@ -477,8 +478,8 @@ export default {
if (item.path === "create") { if (item.path === "create") {
editFormModel.value = schemaToModel(config.edit.schema); editFormModel.value = schemaToModel(config.edit.schema);
} else { } else {
const url = `${config.edit.updateUrl ?? config.query.url}/${rows[0].id}`; const url = format(config.edit.detailsUrl, rows[0].id);
editFormModel.value = (await request(url, null, { method: "GET" })).data; editFormModel.value = (await request(url, null, { method: config.edit.detailsMethod })).data;
editFormModel.value.id = rows[0].id; editFormModel.value.id = rows[0].id;
} }
editFormTitle.value = `${t(item.path)}${config.edit.schema.title}`; editFormTitle.value = `${t(item.path)}${config.edit.schema.title}`;
@ -490,6 +491,25 @@ export default {
return; return;
} else { } else {
// 单个删除 // 单个删除
const url = format(config.edit.deleteUrl, rows[0].id);
try {
await ElMessageBox.confirm("删除", "提示", {
type: "warning",
message: format("确认删除当前行数据吗?", rows[0]),
});
await request(url, null, { method: config.edit.deleteMethod });
ElMessage({
type: "info",
message: "操作完毕",
});
} catch (error) {
if (error === "cancel") {
ElMessage({
type: "info",
message: "删除取消",
});
}
}
} }
const url = `${baseUrl}/${item.path}`; const url = `${baseUrl}/${item.path}`;
// await post( // await post(
@ -522,7 +542,7 @@ export default {
let url = let url =
(editFormMode.value === "create" ? config.edit.createUrl : config.edit.updateUrl) ?? config.query.url; (editFormMode.value === "create" ? config.edit.createUrl : config.edit.updateUrl) ?? config.query.url;
if (editFormMode.value === "update") { if (editFormMode.value === "update") {
url = `${url}/${editFormModel.value.id}`; url = format(url, editFormModel.value.id);
} }
const method = editFormMode.value === "create" ? config.edit.createMethod : config.edit.updateMethod; const method = editFormMode.value === "create" ? config.edit.createMethod : config.edit.updateMethod;
const result = await request(url, editFormModel.value, { method }); const result = await request(url, editFormModel.value, { method });

1
code/WebApp/vanilla/index.html

@ -58,6 +58,7 @@
"@microsoft/signalr": "./lib/@microsoft/signalr/signalr.esm.js", "@microsoft/signalr": "./lib/@microsoft/signalr/signalr.esm.js",
"@vueuse/shared": "./lib/@vueuse/shared/index.mjs", "@vueuse/shared": "./lib/@vueuse/shared/index.mjs",
"@vueuse/core": "./lib/@vueuse/core/index.mjs", "@vueuse/core": "./lib/@vueuse/core/index.mjs",
"async-validator": "./lib/async-validator/index.min.js",
"element-plus": "./lib/element-plus/index.full.min.mjs", "element-plus": "./lib/element-plus/index.full.min.mjs",
"@element-plus/icons-vue":"./lib/@element-plus/icons-vue/index.js", "@element-plus/icons-vue":"./lib/@element-plus/icons-vue/index.js",
"nprogress": "./lib/nprogress/nprogress.vite-esm.js", "nprogress": "./lib/nprogress/nprogress.vite-esm.js",

8
code/WebApp/vanilla/lib/async-validator/index.min.js

File diff suppressed because one or more lines are too long

56029
code/WebApp/vanilla/lib/element-plus/index.full.mjs

File diff suppressed because one or more lines are too long

62
code/WebApp/vanilla/models/code-setting.js

@ -2,7 +2,7 @@ const schema = {
title: "通用代码", title: "通用代码",
type: "object", type: "object",
properties: { properties: {
userName: { project: {
title: "项目", title: "项目",
type: "string", type: "string",
readOnly: true, readOnly: true,
@ -13,7 +13,7 @@ const schema = {
}, },
], ],
}, },
userName: { value: {
title: "值", title: "值",
type: "string", type: "string",
readOnly: true, readOnly: true,
@ -24,7 +24,7 @@ const schema = {
}, },
], ],
}, },
name: { description: {
title: "描述", title: "描述",
type: "string", type: "string",
showForList: true, showForList: true,
@ -37,28 +37,57 @@ const schema = {
}, },
}; };
const url = "base/code-settings"; const baseUrl = "settleaccount/CodeSetting";
const createUrl = url; const queryUrl = `${baseUrl}/GetList`;
const updateUrl = url; const detailsUrl = `${baseUrl}/GET/%s`;
const deleteUrl = url; const createUrl = `${baseUrl}/Create`;
const method = "GET"; const updateUrl = `${baseUrl}/Update/%s`;
const deleteUrl = `${baseUrl}/DeleteList`;
const queryMethod = "POST";
const detailsMethod = "POST";
const createMethod = "POST"; const createMethod = "POST";
const updateMethod = "PUT"; const updateMethod = "POST";
const deleteMethod = "DELETE"; const deleteMethod = "POST";
export default function () { export default function () {
return { return {
query: { query: {
url, url: queryUrl,
method, method: queryMethod,
schema: { schema: {
title: "通用代码", title: "通用代码",
type: "object", type: "object",
properties: { properties: {
filter: { project: {
title: "项目", type: "string",
},
value: {
type: "string",
},
description: {
type: "string", type: "string",
}, },
filters: {
title: "项目",
type: "array",
items: {
type: "object",
properties: {
logic: {
type: "int",
},
column: {
type: "string",
},
action: {
type: "int",
},
value: {
type: "string",
},
},
},
},
skipCount: { skipCount: {
hidden: true, hidden: true,
default: 0, default: 0,
@ -67,6 +96,9 @@ export default function () {
hidden: true, hidden: true,
default: 10, default: 10,
}, },
sorting: {
hidden: true,
},
}, },
}, },
}, },
@ -74,9 +106,11 @@ export default function () {
schema: schema, schema: schema,
}, },
edit: { edit: {
detailsUrl,
createUrl, createUrl,
updateUrl, updateUrl,
deleteUrl, deleteUrl,
detailsMethod,
createMethod, createMethod,
updateMethod, updateMethod,
deleteMethod, deleteMethod,

11
code/WebApp/vanilla/models/login.js

@ -11,10 +11,6 @@ export default function () {
required: true, required: true,
message: "用户名不能为空", message: "用户名不能为空",
}, },
{
max: 64,
message: "用户名的最大长度为 64",
},
], ],
}, },
password: { password: {
@ -26,13 +22,6 @@ export default function () {
required: true, required: true,
message: "密码不能为空", message: "密码不能为空",
}, },
{
max: 64,
message: "密码的最大长度为 64",
},
{
message: "DataTypeAttribute",
},
], ],
}, },
client_id: { client_id: {

38
code/WebApp/vanilla/models/user.js

@ -13,7 +13,9 @@ const schema = {
}, },
{ {
max: 64, max: 64,
message: "用户名的最大长度为 64", },
{
min: 4,
}, },
], ],
}, },
@ -22,6 +24,14 @@ const schema = {
type: "string", type: "string",
readOnly: true, readOnly: true,
input: "password", input: "password",
rules: [
{
required: true,
},
{
min: 6,
},
],
}, },
name: { name: {
title: "姓名", title: "姓名",
@ -31,6 +41,7 @@ const schema = {
{ {
required: true, required: true,
}, },
{ pattern: "^[\u4e00-\u9fa5]+$", message: "%s必须是正确的格式" },
], ],
}, },
phoneNumber: { phoneNumber: {
@ -41,6 +52,7 @@ const schema = {
{ {
required: true, required: true,
}, },
{ pattern: "^\\d{11}$", message: "%s必须是正确的格式" },
], ],
}, },
email: { email: {
@ -48,9 +60,8 @@ const schema = {
type: "string", type: "string",
showForList: true, showForList: true,
rules: [ rules: [
{ { required: true },
required: true, { pattern: "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+.[a-zA-Z0-9_-]+$", message: "%s必须是正确的格式" },
},
], ],
}, },
// roleNames: { // roleNames: {
@ -68,11 +79,14 @@ const schema = {
}, },
}; };
const url = "base/user"; const baseUrl = "base/user";
const createUrl = url; const queryUrl = `${baseUrl}`;
const updateUrl = url; const detailsUrl = `${baseUrl}/%s`;
const deleteUrl = "api/identity/users"; const createUrl = `${baseUrl}`;
const method = "GET"; const updateUrl = `${baseUrl}/%s`;
const deleteUrl = "identity/users/%s";
const queryMethod = "GET";
const detailsMethod = "GET";
const createMethod = "POST"; const createMethod = "POST";
const updateMethod = "PUT"; const updateMethod = "PUT";
const deleteMethod = "DELETE"; const deleteMethod = "DELETE";
@ -80,8 +94,8 @@ const deleteMethod = "DELETE";
export default function () { export default function () {
return { return {
query: { query: {
url, url: queryUrl,
method, method: queryMethod,
schema: { schema: {
title: "用户", title: "用户",
type: "object", type: "object",
@ -106,9 +120,11 @@ export default function () {
selectable: (o) => o.name !== "admin", selectable: (o) => o.name !== "admin",
}, },
edit: { edit: {
detailsUrl,
createUrl, createUrl,
updateUrl, updateUrl,
deleteUrl, deleteUrl,
detailsMethod,
createMethod, createMethod,
updateMethod, updateMethod,
deleteMethod, deleteMethod,

2
code/WebApp/vanilla/router/routes.js

@ -52,7 +52,7 @@ export default [
title: "删除", title: "删除",
icon: "file", icon: "file",
permission: "AbpIdentity.Users.Delete", permission: "AbpIdentity.Users.Delete",
isTop: true, disabled: "o=>o.userName==='admin'",
}, },
}, },
{ {

49
code/WebApp/vanilla/utils/validation.js

@ -1,3 +1,6 @@
import { format } from "./index.js";
//import { Schema } from "element-plus";
const messages = { const messages = {
default: "%s验证失败", default: "%s验证失败",
required: "%s是必填项", required: "%s是必填项",
@ -42,7 +45,7 @@ const messages = {
range: "%s的数量必须在%s和%s之间", range: "%s的数量必须在%s和%s之间",
}, },
pattern: { pattern: {
mismatch: "%s的值 %s 不匹配模式 %s", mismatch: "%s的值必须是正确的格式",
}, },
clone: function clone() { clone: function clone() {
const cloned = JSON.parse(JSON.stringify(this)); const cloned = JSON.parse(JSON.stringify(this));
@ -110,4 +113,46 @@ const validators = {
}, },
}; };
export { messages }; //
const getRules = (parentSchema, property, data) => {
if (!property.rules) {
return null;
}
const rules = [...(Array.isArray(property.rules) ? property.rules : [property.rules])].map((o) =>
JSON.parse(JSON.stringify(o))
);
Object.values(rules).forEach((rule) => {
rule.data = data;
rule.schema = parentSchema;
rule.title ??= property.title;
rule.type = property.type;
if (rule.validator) {
rule.validator = validators[rule.validator];
}
if (!rule.message) {
if (rule.required) {
rule.message = format(messages.required, property.title);
} else if (rule.pattern) {
rule.message = format(messages.pattern.mismatch, property.title);
} else if (property.type === "string" || property.type === "number" || property.type === "array") {
if (rule.len) {
rule.message = format(messages[property.type].len, property.title, rule.len);
} else if (rule.min) {
rule.message = format(messages[property.type].min, property.title, rule.min);
} else if (rule.max) {
rule.message = format(messages[property.type].max, property.title, rule.max);
} else if (rule.range) {
rule.message = format(messages[property.type].range, property.title, rule.range);
}
}
} else {
rule.message = format(rule.message, property.title);
}
});
return rules;
};
//Object.assign(Schema.messages, messages);
//Object.assign(Schema.validators, validators);
export { getRules };

Loading…
Cancel
Save