[JavaScript知识库]hc定制平台组件使用

1、hc组件之slot插槽的使用

需求：page-engineering组件详情页面插入自定义视频，通过getDetailCallback方法回调设置

 ?  <page-engineering
 ? ? ?  ref="pageEngineering"
 ? ? ?  @getDetailCallback="getDetailCallback"
 ? ?  >
 ? ? ?  <!-- 插槽内容 -->
 ? ? ?  <template #video>
 ? ? ? ?  <div>
 ? ? ? ? ?  <video :src="videoSrc" controls="controls"></video>
 ? ? ? ?  </div>
 ? ? ?  </template>
 ? ?  </page-engineering>
 ? ? ?
 ?  //js代码
 ?  // 详情页回调，设置视频slot
 ?  getDetailCallback(val) {
 ? ?  let videoFile = this.$refs.pageEngineering.listTransferFn(
 ? ? ?  'getDetailFormObject',//获取字段对象的方法
 ? ? ?  't_medical_prescription_apply__videoFile'//表单隐藏字段
 ? ?  )
 ? ?  if (videoFile) {//修改为slot类型
 ? ? ?  videoFile.type = 'slot'
 ? ? ?  videoFile.typeSet = { name: 'video' }
 ? ?  }
 ? ?  this.videoSrc = val.videoFile//获取字段的值
 ?  }

2、hc组件之子应用页面100%撑开并适配

min-height: calc(100vh - 120px);

3、hc组件之回调函数修改按钮现实与隐藏

pageEngineering表单通过listTransferFn桥接方法来设置。

const add_button = this.$refs.pageEngineering.listTransferFn('getBtnParams', 'add_button');
addBtn.hidden = true;

同理，按钮需要调用小表单弹窗实现也是类似的。通过listTransferFn桥接setBtnParams方法，设置回调函数event来控制v-model变量是否展示。

<hdBouncedBox name="提示" v-model="authorization" @sureClick="SureBtn">
 ?  <template #main>
 ?  确认为该药师授权吗？
 ?  </template>
</hdBouncedBox>
?
//js代码
// 授权按钮
const authorization = {
 ?  type: 'function',
 ?  typeSet: { triggerEvent: this.authorizationBtn }//绑定为函数，通过函数修改状态
};
this.$refs.pageEngineering.listTransferFn(
 ?  'setBtnParams',
 ?  'commonAuthorizationCustomButton',
 ?  { event: authorization }
);
 ? ? ?

4、hc组件之标签表单的新建与编辑

通过路由来判断标签表单是新建与编辑，init初始化时判断

init() {
 ? ?  // 初始化获取路由 参数
 ? ?  let { name, jsonstr } = this.$route.params;
 ? ?  if (!name) return;
 ? ?  let ID = name,
 ? ? ?  PARAMS = JSON.parse(decodeURIComponent(jsonstr));
 ? ?  // // 赋值
 ? ?  Object.assign(this.formSets, {
 ? ? ?  ID,
 ? ? ?  PARAMS: PARAMS
 ? ?  });
 ? ?  if (this.state == 'edit') { 
 ? ?    //to do
 ? ?  }
 ?  },

标签表单编辑时主要注意有一个取值赋值的过程，需要确定是在标签表单已经加载的情况下才能赋值，否则会赋值失败。通过columns_callback来调用赋值的方法，并且注意赋值的方法可以写成异步函数的形式。

<hd-form-engineering @columns_callback="callbackFun">
</hd-form-engineering>
?
?
callbackFun(d) {
 ?  this.titleFilter(d, this.state == 'add' ? 'add' : 'edit');
 ?  let { handleMsg } = this;
 ?  if (this.state == 'edit' && handleMsg) handleMsg.next();
}
?
// 编辑回调赋值
*handleMsg() {
    yield true;
    //赋值
    //...
    this.$refs.hdFormEngineering.changeItemValue(valObj);
}

5、hc组件之图片上传张数限制

通过$set来设置表单字段maxLength字段

this.$set(
 ? ? ? ?  this.$refs.hdFormEngineering.getFormObject(keys.licensePic).typeSet,
 ? ? ? ?  'maxLength',
 ? ? ? ?  1
 ? ? ?  );