目录
this.$message.error(e && e.msg)
样式不生效：devtools查找，编译前的标签，运行时不一定存在
查看时不可编辑，hover都显示禁点（鼠标默认select是可点，input是禁点）
点击没选不应该校验，取消选择才需要校验，最后提交时才校验必填项有无值
适配性
PC：window/mac都要测试
协作
后端：确定 数据类型保持一致
修改公共组件：同步修改
要把其他用到公共组件的地方也改了，vs中搜索即可
测试方法
标签：标签 内容/ref/
<div class="right-wrap">
{
{ formData.moduleDataType.includes(1) }}
<mds-tabs position="right" v-model="active" @change="scroll(active, $event)">
<mds-tabs-pane ref="ttttt" tab="1" :index="1">1</mds-tabs-pane>
<mds-tabs-pane style="color: brown;" tab="2" :index="2">2</mds-tabs-pane>
<mds-tabs-pane tab="3" :index="3">3</mds-tabs-pane>
</mds-tabs>
</div>调用方法/属性前要确保一定存在：赋初值/判断
arr&&arr.length
this.$message.error(e && e.msg)
UI
动态文字
不设置长度width，不然会超出省略
不必设置文本字体font-family
默认不加粗，所以不必设置font-weight
默认就是text-align:left
交互
包裹icon
直接给icon添加事件，可能不起效，因为是::before
<span class="cancel-upload" @click="cancelUpload"><mds-icon type="line-close" /></span>样式不生效：devtools查找，编译前的标签，运行时不一定存在
可交互的需要提示
hover样式
.span-operate {
color: #1564FF;
cursor: pointer;
}
没有交互逻辑，就不要设置交互
无法交互的情况需要交互失效
按钮失效
例如：无成功上传的文件则无法进行下一步
查看时不可编辑，hover都显示禁点（鼠标默认select是可点，input是禁点）
::v-deep .mds-input[disabled] {
cursor: not-allowed !important;
}<mds-inputnumber style="width: 400px" v-model="formData.confmTmRange[0]" placeholder="请输入1-28的整数"
:maxlength="2" :disabled="disabled" clearable controls-position="right" hover :min="1"
:max="28"></mds-inputnumber>超出内容的样式
传值前要有默认值，除非保证必传，以减少报错
切换选择时，之前的数据要清空
设置数据前要清空
openLogDrawer() {
this.logData = [];
API.getQuery(`getOtherIndexFileLog/${this.wpReleId}`).then((res: any) => {
res.data.forEach((val: any) => {
this.logData.push({
name: val.fileNm || 'undefined',
time: val.createTm || 'undefined',
creator: val.creator || 'undefined',
state: this.status[val.status] || 'undefined',
fileUrl: val.fileUrl || 'undefined',
fileLogId: val.id || -1,
})
})
this.visibility = true
})
}注意区分中英文符号（，：）
提示
表单
远程搜索
条数过多时，防抖
<mds-form-item v-show="formData.applyType === 1" label="OA" prop="applyOa" :required="formData.applyType === 1">
<mds-select
style="width: 480px"
v-model="formData.applyOa"
:multiple="true"
placeholder="选择或搜索OA"
filterable
:remote="true"
:remote-method="searchOA"
:disabled="showDetail"
clearable
@change="changeOA"
>
<mds-option
class="select-oaAndDept"
v-for="item in OAoptions"
:key="item.oa"
:value="item.empOa"
:label="item.empNmAndOa"
>
<div class="select-name">
{
{ item.empNmAndOa }}
<div class="select-dept">{
{ item.deptNm }}</div>
</div>
</mds-option>
</mds-select>
</mds-form-item>// OA list
OAoptions: any = []
searchOA = debounce(this.searchOaAPi, 500)
searchOaAPi(val: any) {
if (!val) return
bspUserInfoFuzzyQueryOaList({
empOaOrNm: val,
partitionDt: ''
}).then((res: any) => {
if (res && res.code == 200) {
this.OAoptions = res.data || []
} else {
this.$message.error(res.msg || '系统错误')
}
}).catch((e: any) => {
this.$message.error(e.msg)
})
// this.OAoptions = [
// { name: 'zhangsan-', oa: 'zhangsan' },
// { name: 'lisi-', oa: 'lisi' }
// ]
}条数有限时，回显
<mds-select
:class="{'validate-success': formData.applyTeamAttr.length}"
style="width: 480px; display: block;"
v-model="formData.applyTeamAttr"
placeholder="选择团队属性"
filterable
multiple
:remote="true"
:remote-method="searchTeam"
:disabled="showDetail || !!cfgTyp"
clearable
@change="changeApplyTeam"
>
<mds-option
v-for="item in teamList"
:key="item"
:value="item"
:label="item"
></mds-option>
</mds-select> teamList: any = []
searchTeam(val: any = '') {
bspUserInfoFuzzyQueryTeamAttrList({
partitionDt: '',
teamAttr: val
}).then((res: any) => {
if (res && res.code == 200) {
this.teamList = res.data || []
} else {
this.$message.error(res.msg || '系统错误')
}
}).catch((e: any) => {
this.$message.error(e.msg)
})
}
mounted() {
if (!this.notCreate) {
this.searchTeam()
}
}点击没选不应该校验，取消选择才需要校验，最后提交时才校验必填项有无值
rules = {
//input类型：blur
confmNm: [{ required: true, message: '请输入工作台版本名称', trigger: 'blur' }],
//选择类型：change
applyType: [{ required: true, message: '请选择适用人群', trigger: 'change' }],
applyOa: [{ required: true, validator: this.applyOaValidator, trigger: 'change' }],
}
validate
覆盖已有内容的红色边框
::v-deep .validate-success .mds-input {
border-color: #d8dce6 !important;
}设置select样式
<mds-select :class="{'validate-success': formData.confmTm}" >
<mds-option v-for="item in CONFM_TM" :value="item.id" :label="item.label" :disabled="isDisabledTm(item)"/>
</mds-select>