build / build (push) Successful in 3m28s
按用户要求,把 NoticeFront 里这两块 UI 原样搬到助手表单(不再自制近似控件):
- 正文 → wangEditor v5(@wangeditor/editor + @wangeditor/editor-for-vue)。
提交给后端的是 **HTML 字符串**,与模块页 NoticeRequest.content 一致;
插图上传走 /api/file/UploadImage、预览走 /api/file/Preview?id=(地址由后端下发,
统一由编排层拼模块前缀)。异步 chunk 加载,避免把 800KB 编辑器塞进首屏。
- 通知对象 → 1:1 搬运模块页 components/UserCheckInput.vue + UserCheckModal.vue:
radio「全部用户 / 指定用户」+ 只读回显 + +/清空 + 选人弹窗(左 zTree 组织树勾选级联 /
右已选列表 / 全选 / 删除选中 / 按名字搜索回勾);v-model 值是字符串("all" 或 id 逗号串)。
- 全局依赖 jQuery + zTree 按模块页的方式由 index.html 全局加载(public/libs/),
不用 npm 引入 —— 保证加载顺序(zTree 必须在 jQuery 之后)与样式/图标与模块页完全一致。
已确认模块页的 lodash 实际未被使用,故不引入。
FormCard 新增两个 widget 分支,每一处都对齐模块页口径:
- richtext:初值取字符串、提交原 HTML,只读摘要用剥标签后的纯文本;
- userpicker:初值数组 join / 字符串原样(空则 allToken)、提交字符串;
★ 跳过下拉字典的「拍平 + 取值对齐」—— 那条路会把人员 id 串判成「认不出的值」清掉,
等于把模型/用户已经选好的人悄悄抹掉;
- 两者都独占整行(自适应多列会把单选组挤到换行)。
验证:.scratch/verify-notice-publish-widgets.mjs 真机 38/38(含正文真实打字、
两个数据源页签、勾选回显、以及提交体 receiveList 必须是字符串 "101"、content 必须是 <p>…)。
npm run build 通过(RichTextEditor 单独成 chunk)。
378 lines
7.2 KiB
CSS
378 lines
7.2 KiB
CSS
/*-------------------------------------
|
|
zTree Style
|
|
|
|
version: 3.4
|
|
author: Hunter.z
|
|
email: hunter.z@263.net
|
|
website: http://code.google.com/p/jquerytree/
|
|
|
|
-------------------------------------*/
|
|
.ztree * {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif
|
|
}
|
|
|
|
.ztree {
|
|
margin: 0;
|
|
padding: 5px;
|
|
color: #333
|
|
}
|
|
|
|
.ztree li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
line-height: 17px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
outline: 0
|
|
}
|
|
|
|
.ztree li ul {
|
|
margin: 0;
|
|
padding: 0 0 0 18px
|
|
}
|
|
|
|
.ztree li ul.line {
|
|
background: url(./img/line_conn.png) 0 0 repeat-y;
|
|
}
|
|
|
|
.ztree li a {
|
|
padding-right: 3px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
height: 21px;
|
|
color: #333;
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
vertical-align: top;
|
|
display: inline-block
|
|
}
|
|
|
|
.ztree li a:hover {
|
|
text-decoration: underline
|
|
}
|
|
|
|
.ztree li a.curSelectedNode {
|
|
padding-top: 0px;
|
|
background-color: #e5e5e5;
|
|
color: black;
|
|
height: 21px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.ztree li a.curSelectedNode_Edit {
|
|
padding-top: 0px;
|
|
background-color: #e5e5e5;
|
|
color: black;
|
|
height: 21px;
|
|
border: 1px #666 solid;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.ztree li a.tmpTargetNode_inner {
|
|
padding-top: 0px;
|
|
background-color: #aaa;
|
|
color: white;
|
|
height: 21px;
|
|
border: 1px #666 solid;
|
|
opacity: 0.8;
|
|
filter: alpha(opacity=80)
|
|
}
|
|
|
|
.ztree li a.tmpTargetNode_prev {}
|
|
|
|
.ztree li a.tmpTargetNode_next {}
|
|
|
|
.ztree li a input.rename {
|
|
height: 14px;
|
|
width: 80px;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 12px;
|
|
border: 1px #585956 solid;
|
|
*border: 0px
|
|
}
|
|
|
|
.ztree li span {
|
|
line-height: 21px;
|
|
margin-right: 2px
|
|
}
|
|
|
|
.ztree li span.button {
|
|
line-height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 21px;
|
|
height: 21px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
border: 0 none;
|
|
cursor: pointer;
|
|
outline: none;
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
background-attachment: scroll;
|
|
background-image: url("./img/bootstrap.png");
|
|
}
|
|
|
|
.ztree li span.button.chk {
|
|
width: 13px;
|
|
height: 13px;
|
|
margin: 0 2px;
|
|
cursor: auto
|
|
}
|
|
|
|
.ztree li span.button.chk.checkbox_false_full {
|
|
background-position: -5px -5px;
|
|
}
|
|
|
|
.ztree li span.button.chk.checkbox_false_full_focus {
|
|
background-position: -5px -26px;
|
|
}
|
|
|
|
.ztree li span.button.chk.checkbox_false_part {
|
|
background-position: -5px -48px;
|
|
}
|
|
|
|
.ztree li span.button.chk.checkbox_false_part_focus {
|
|
background-position: -5px -68px;
|
|
}
|
|
|
|
.ztree li span.button.chk.checkbox_false_disable {
|
|
background-position: -5px -89px;
|
|
}
|
|
|
|
.ztree li span.button.chk.checkbox_true_full {
|
|
background-position: -26px -5px;
|
|
}
|
|
|
|
.ztree li span.button.chk.checkbox_true_full_focus {
|
|
background-position: -26px -26px;
|
|
}
|
|
|
|
.ztree li span.button.chk.checkbox_true_part {
|
|
background-position: -26px -48px;
|
|
}
|
|
|
|
.ztree li span.button.chk.checkbox_true_part_focus {
|
|
background-position: -26px -68px;
|
|
}
|
|
|
|
.ztree li span.button.chk.checkbox_true_disable {
|
|
background-position: -26px -89px;
|
|
}
|
|
|
|
.ztree li span.button.chk.radio_false_full {
|
|
background-position: -47px -5px;
|
|
}
|
|
|
|
.ztree li span.button.chk.radio_false_full_focus {
|
|
background-position: -47px -26px;
|
|
}
|
|
|
|
.ztree li span.button.chk.radio_false_part {
|
|
background-position: -47px -47px;
|
|
}
|
|
|
|
.ztree li span.button.chk.radio_false_part_focus {
|
|
background-position: -47px -68px;
|
|
}
|
|
|
|
.ztree li span.button.chk.radio_false_disable {
|
|
background-position: -47px -89px;
|
|
}
|
|
|
|
.ztree li span.button.chk.radio_true_full {
|
|
background-position: -68px -5px;
|
|
}
|
|
|
|
.ztree li span.button.chk.radio_true_full_focus {
|
|
background-position: -68px -26px;
|
|
}
|
|
|
|
.ztree li span.button.chk.radio_true_part {
|
|
background-position: -68px -47px;
|
|
}
|
|
|
|
.ztree li span.button.chk.radio_true_part_focus {
|
|
background-position: -68px -68px;
|
|
}
|
|
|
|
.ztree li span.button.chk.radio_true_disable {
|
|
background-position: -68px -89px;
|
|
}
|
|
|
|
.ztree li span.button.switch {
|
|
width: 21px;
|
|
height: 21px
|
|
}
|
|
|
|
.ztree li span.button.root_open {
|
|
background-position: -105px -63px
|
|
}
|
|
|
|
.ztree li span.button.root_close {
|
|
background-position: -126px -63px
|
|
}
|
|
|
|
.ztree li span.button.roots_open {
|
|
background-position: -105px 0;
|
|
}
|
|
|
|
.ztree li span.button.roots_close {
|
|
background-position: -126px 0;
|
|
}
|
|
|
|
.ztree li span.button.center_open {
|
|
background-position: -105px -21px;
|
|
}
|
|
|
|
.ztree li span.button.center_close {
|
|
background-position: -126px -21px;
|
|
}
|
|
|
|
.ztree li span.button.bottom_open {
|
|
background-position: -105px -42px;
|
|
}
|
|
|
|
.ztree li span.button.bottom_close {
|
|
background-position: -126px -42px;
|
|
}
|
|
|
|
.ztree li span.button.noline_open {
|
|
background-position: -105px -84px;
|
|
}
|
|
|
|
.ztree li span.button.noline_close {
|
|
background-position: -126px -84px;
|
|
}
|
|
|
|
.ztree li span.button.root_docu {
|
|
background-position: -105px -63px;
|
|
}
|
|
|
|
.ztree li span.button.roots_docu {
|
|
background-position: -84px 0;
|
|
}
|
|
|
|
.ztree li span.button.center_docu {
|
|
background-position: -84px -21px;
|
|
}
|
|
|
|
.ztree li span.button.bottom_docu {
|
|
background-position: -84px -42px;
|
|
}
|
|
|
|
.ztree li span.button.noline_docu {
|
|
background: none;
|
|
}
|
|
|
|
.ztree li span.button.ico_open {
|
|
margin-right: 2px;
|
|
background-position: -147px -21px;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.ico_close {
|
|
margin-right: 2px;
|
|
margin-right: 2px;
|
|
background-position: -147px 0;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.ico_docu {
|
|
margin-right: 2px;
|
|
background-position: -147px -43px;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.edit {
|
|
margin-left: 2px;
|
|
margin-right: -1px;
|
|
background-position: -189px -21px;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.edit:hover {
|
|
background-position: -168px -21px;
|
|
}
|
|
|
|
.ztree li span.button.remove {
|
|
margin-left: 2px;
|
|
margin-right: -1px;
|
|
background-position: -189px -42px;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.remove:hover {
|
|
background-position: -168px -42px;
|
|
}
|
|
|
|
.ztree li span.button.add {
|
|
margin-left: 2px;
|
|
margin-right: -1px;
|
|
background-position: -189px 0;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.add:hover {
|
|
background-position: -168px 0;
|
|
}
|
|
|
|
ul.tmpTargetzTree {
|
|
background-color: #FFE6B0;
|
|
opacity: 0.8;
|
|
filter: alpha(opacity=80)
|
|
}
|
|
|
|
span.tmpzTreeMove_arrow {
|
|
width: 16px;
|
|
height: 21px;
|
|
display: inline-block;
|
|
padding: 0;
|
|
margin: 2px 0 0 1px;
|
|
border: 0 none;
|
|
position: absolute;
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
background-attachment: scroll;
|
|
background-position: -168px -84px;
|
|
background-image: url("./img/bootstrap.png");
|
|
z-index: 10000;
|
|
}
|
|
|
|
span.tmpzTreeMove_prev {
|
|
background: red;
|
|
}
|
|
|
|
|
|
|
|
ul.ztree.zTreeDragUL {
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: auto;
|
|
height: auto;
|
|
overflow: hidden;
|
|
background-color: #cfcfcf;
|
|
border: 1px #00B83F dotted;
|
|
opacity: 0.8;
|
|
filter: alpha(opacity=80)
|
|
}
|
|
|
|
.ztreeMask {
|
|
z-index: 10000;
|
|
background-color: #cfcfcf;
|
|
opacity: 0.0;
|
|
filter: alpha(opacity=0);
|
|
position: absolute
|
|
} |