woodao-pc-ui 0.0.1

package/src/package/form/baseForm.vue

@@ -0,0 +1,347 @@
+<template>
+  <el-form class="base-form-container" ref="formRef" :label-position="config.labelPosition || 'right'"
+           :form="domainData"
+
+
+
+    :label-width="(config.labelWidth || 100) + 'px'" :size="config.size || 'default'">
+    <slot name="prefix"></slot>
+    <el-row style="width: 100%">
+      <template v-for="(item, i) of innerFormItems" :key="i" >
+        <el-col :span="item.span || 24" v-show="item.hidden!=true">
+
+
+          <!-- label 带tips -->
+          <div
+            v-if="item.tips"
+            class="el-form-item  el-form-item--default"
+          >
+            <label
+              slot="label"
+              class="el-form-item__label flex-row-end"
+              :style="{'width': config.labelWidth + 'px',alignItems:'center'}"
+            >
+              <span
+                style="margin-right:4px;"
+                v-if="item.tips.position == 'left'"
+              >{{ item.tips.label }}</span>
+
+
+              <el-tooltip :placement="item.tips.placement || 'bottom'">
+                <template #content >
+                  <div style="diaplay:inline;max-width: 300px">{{ item.tips.message || '提示信息' }}</div>
+                   </template>
+                <el-icon size="16"><QuestionFilled /></el-icon>
+              </el-tooltip>
+              <span
+                style="margin-left:4px;"
+                v-if="item.tips.position == 'right'"
+              >{{ item.tips.label }}</span>
+            </label>
+
+            <div
+              class="el-form-item__content"
+              :style="{'width': config.labelWidth + 'px'}"
+            >
+              <BaseFormItem
+                ref="BaseFormItem"
+                :item="item"
+                @onSelectChangeFun="onSelectChange"
+                :domainData="domainData"
+                @handleSelect="handleSelect"
+                @selUser="selUser"
+                @onChange="item.onChange"
+              >
+              </BaseFormItem>
+            </div>
+
+          </div>
+
+          <!--            分区域-->
+          <div v-else-if="item.type && item.type=='splitBlock'">
+            <div class="flex-row-start ">
+              <div class="ring-block"></div>
+              <div class="margin-left-sm flex-between text-bold">{{ item.value }}</div>
+            </div>
+
+            <div style="width: 100%;height:15px "></div>
+          </div>
+
+          <!-- label 不带tips -->
+          <el-form-item
+            v-else
+            :class="{ 'is-error': item.errorMessage }"
+            :rules="item.rules"
+            :label="item.label"
+            :show-message="true"
+            v-show="!item.hidden"
+            :label-width="item.labelWidth || config.labelWidth"
+            :label-position="item.labelPosition||config.labelPosition"
+          >
+            <BaseFormItem
+                @onSelectChangeFun="onSelectChange"
+              ref="BaseFormItem"
+
+              :item="item"
+              :domainData="domainData"
+              @handleSelect="handleSelect"
+              @selUser="selUser"
+              @onChange="item.onChange"
+            >
+            </BaseFormItem>
+
+            <!-- 选人组织机构 -->
+            <selPeople
+              class="w100"
+              v-if="item.type=='selPeople'"
+              ref="selPeople"
+              @selRecords="selRecords"
+              :objKey="item.name"
+              :readOnly="item.readOnly"
+              :value="item.value"
+              :ids="item.bindId"
+              :moreHeight="item.moreHeight"
+              :info="item.info"
+              :moreSel="item.moreSel||false"
+            >
+            </selPeople>
+
+            <!--            树形下拉选择叶类-->
+            <el-select
+              v-if="item.type === 'treeSelLeaf'"
+              :multiple="item.multiple"
+              v-model="domainData[item.name]"
+              :disabled="item.disabled"
+              :size="size || 'small'"
+              :filterable="item.filterable ||true"
+              :clearable="item.clearable||true"
+              style="width: 100%"
+              class="form-item main-select-tree"
+              :placeholder="
+            item.placeholder || `请选择${item.label}` || '请输入内容'
+            "
+              @change="
+            item.onChange||onChange"
+            >
+              <el-option v-for="item in formatData(datas)" :key="item.value" :label="item.label" :value="item.value" style="display: none;" />
+              <el-tree class="main-select-el-tree" ref="selectTree"
+                       :data="datas"
+                       node-key="id"
+                       highlight-current
+                       :props="defaultProps"
+                       @node-click="handleNodeClick"
+                       :current-node-key="value"
+                       :expand-on-click-node="true"
+              />
+            </el-select>
+            <!--            附件上传-->
+            <uploadFile v-if="item.type === 'uploadFile'" :uploadType="item.uploadType" :uploadFile="item.uploadFile"
+                        :max-num="item.maxNum" :fileInfo="item.fileInfo || '已上传'" :max-size="item.maxSize" :bus-id="item.busId"
+                        :bus-name="item.busName" :bus-type="item.busType" :domain-name="item.domainName"
+                        :btn-size="item.btnSize || 'small'"
+                        :authsOfDelete="item.authsOfDelete" @uploadSuccess="item.uploadSuccess || ''"
+                        :infoText="item.infoText || ''"  :tipText="item.tipText || ''"   :disabled="item.disabled" :isWidth="item.isWidth||false">
+            </uploadFile>
+
+
+            <div  v-if="item.type==='Wangeditor'" class="sel-item-container">
+              <Wangeditor
+
+                :Wanghtml="item.value"
+                :ishiddenImage="true"
+                :ishiddenVideo="true"
+                ref="updateWangeditor"
+              ></Wangeditor>
+            </div>
+
+
+
+            <span v-if="item.errorMessage" class="error-message">{{ item.errorMessage }}</span>
+          </el-form-item>
+
+          <slot name="extra"></slot>
+
+
+
+        </el-col>
+
+      </template>
+
+    </el-row>
+
+    <slot name="extra"></slot>
+  </el-form>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { useForm } from "@/hooks";
+import selPeople from "@/components/businessComponent/selPeople/selPeople";
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  onMounted,
+  PropType,
+  watch,
+} from "vue";
+import { FormRenderItem } from "./formRender";
+import BaseFormItem from "./baseFormItem.vue";
+import Wangeditor from "@/components/businessComponent/wangEditor.vue";
+export default defineComponent({
+  name: "BaseForm",
+  components: {
+    Wangeditor,
+    BaseFormItem,
+    selPeople
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => {
+        return {
+          size: "default",
+          labelWidth: "120",
+          labelPosition: "right",
+        };
+      },
+    },
+    formItems: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 为了避免TypeScript解析错误，暂时移除PropType类型断言
+  },
+  setup(props, { expose,emit }) {
+    const formRef = ref(null)
+    const submitForm = (formEl) => {
+      if (!formEl) return
+      formEl.validate((valid) => {
+        if (valid) {
+          console.log('submit!')
+        } else {
+          console.log('error submit!')
+          return false
+        }
+      })
+    }
+    const { checkParams, resetParams, generatorParams } = useForm();
+    const innerFormItems = computed(() => {
+      console.log(innerFormItems,'111111')
+      return props.formItems;
+    });
+    function mCheckParams() {
+      return checkParams(innerFormItems.value);
+    }
+    function mResetParams() {
+      return resetParams(innerFormItems.value);
+    }
+    function mGeneratorParams() {
+      return generatorParams(innerFormItems.value);
+    }
+    expose({
+      checkParams: mCheckParams,
+      resetParams: mResetParams,
+      generatorParams: mGeneratorParams,
+    });
+    function selRecords(data){
+
+      console.log(data)
+      let selids = []
+      let names = []
+      if(data.datas&&data.datas.length>0){
+        data.datas.forEach((item, index) => {
+          selids.push(item.id)
+          names.push(item.nickname)
+        })
+      }else if(data&&data.length>0) {
+        data.forEach((item, index) => {
+          selids.push(item.id)
+          names.push(item.nickname)
+        })
+      }
+      props.formItems.forEach((it) => {
+        if (it.name == data.objKey) {
+          it.bindId = selids.join(",")
+          it.value = names.join(",")
+
+        }
+      });
+      // emit("selRecords");
+    }
+
+
+    function onSelectChange(item) {
+
+
+      emit("onSelectChangeFun", item);
+    }
+    const domainData = computed(() =>generatorParams(innerFormItems.value))
+    return {
+      selRecords,
+      formRef,
+      domainData,
+      submitForm,
+      innerFormItems,
+      onSelectChange,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.error-message {
+  //color: #f56c6c;
+  //font-size: 13px;
+  //position: absolute;
+  //left: 0;
+  //top:24px;
+  color: #f56c6c;
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+}
+.form-item {
+  width: 100%;
+}
+.ring-block {
+  width: 3px;
+  height: 14px;
+  background: #00b3f3;
+}
+.go-content-body {
+  position: relative;
+
+  .sel-item-container {
+    border: 1px solid #dcdee2;
+    border-radius: 4px;
+    color: #515a6e;
+    background-color: #fff;
+    background-image: none;
+    height: 32px;
+    line-height: 30px;
+
+    &:hover {
+      border: 1px solid #2d8cf0;
+    }
+  }
+
+  .placeholder {
+    color: #bbbbbb;
+  }
+
+  .input-group-addon {
+    position: absolute;
+    right: 8px;
+    top: 7px;
+    color: #666;
+    font-size: 14px;
+  }
+}
+
+</style>

package/src/package/form/baseFormItem.vue

@@ -0,0 +1,352 @@
+<template>
+
+  <div style="width: 100%">
+    <FormRender v-if="item.render" :render="item.render" :form-item="item" />
+    <el-button v-if="item.type === 'button'" :type="item.btnType||'primary'" @click="item.click">{{ item.btnText }}</el-button>
+
+    <el-input v-if="item.type === 'input'"
+              v-model="item.value"
+              :placeholder="item.placeholder || '请输入内容'"
+              :size="size || 'default'"   clearable
+              :readonly="item.readonly||false"
+              auto-complete="new-password"
+               @change="changeInput(item)"
+              :disabled="item.disabled || false" :type="item.inputType || 'text'" :maxlength="item.maxLength"
+              :rows="item.rows || 5" class="form-item" :show-password="item.inputType === 'password'" />
+
+
+    <div class="w100"  v-if="item.type === 'input-fixed'">
+      <div  class="flex-row-start w100">
+        <span>com.woodao.services</span>
+
+        <el-input  v-model="item.value1" :placeholder="item.placeholder1 || '请输入'"
+                   :size="size || 'default'"   clearable
+                   :readonly="item.readonly||false"
+                   auto-complete="new-password"
+                   :disabled="item.disabled || false" :type="item.inputType || 'text'" :maxlength="item.maxLength"
+                   :rows="item.rows || 5" class="margin-lr-sm" :show-password="item.inputType === 'password'" />
+
+        <el-input  v-model="item.value2" :placeholder="item.placeholder2 || '请输入'"
+                   :size="size || 'default'"   clearable
+                   :readonly="item.readonly||false"
+                   auto-complete="new-password"
+                   :disabled="item.disabled || false" :type="item.inputType || 'text'" :maxlength="item.maxLength"
+                   :rows="item.rows || 5" :show-password="item.inputType === 'password'" />
+      </div>
+      <div v-show="item.description" class="w100 option-description">{{ item.description }}</div>
+    </div>
+
+
+      <!-- 系统编码 -->
+      <select-by-system-code
+              v-if="item.type === 'sysCodingDrop'"
+              :sysCode="item.sysCode"
+              :item="item"
+              :bindValue="item.name"
+              :bindLabel="item.label"
+              @selectChange="selectChange($event,item)"
+      ></select-by-system-code>
+
+
+
+    <!--多文本输入-->
+    <el-input
+        v-if="item.type === 'textarea'"
+        v-model="item.value"
+        :size="size  || 'default'"
+        clearable
+        :type="item.type || ''"
+        :placeholder="item.placeholder || `请输入${item.label}` || '请输入内容'"
+        :autosize="{ minRows: item.minRows || 2, maxRows: item.maxRows || 15 }"
+        :maxlength="item.maxLength"
+        :rows="item.rows || 5"
+        class="form-item"
+        :disabled="item.disabled"
+        :readonly="item.readonly||false"
+        @focus="focusForm(item)"
+    />
+    <div v-show="item.type === 'textarea'&&item.description" class="option-description">{{ item.description }}</div> <!-- 这里是选项后面的说明文字 -->
+
+
+    <el-input
+        v-if="item.type === 'number'"
+        v-model="item.value"
+        :size="size || 'small'"
+        :max="item.max||999999"
+        :min="item.min||0"
+
+        :type="item.type || ''"
+        class="form-item"
+        style="width: 100%"
+        :disabled="item.disabled"
+        :placeholder="item.placeholder || `请输入${item.label}` || '请输入内容'"
+    />
+
+
+
+    <el-select v-else-if="item.type === 'select'" v-model="item.value"
+               :placeholder="item.placeholder || '请选择'" :size="size || 'default'"
+               :filterable="item.filterable ? true : false" :clearable="item.clearable || true" :disabled="item.disabled || false"
+               :readonly="item.readonly||false"
+               :multiple="item.multiple"
+               style="width: 100%" class="form-item" @change="
+                item.onChange
+                  ? item.onChange(item.value, item.associatedOption || '')
+                  : onSelectChange(item)
+              ">
+      <el-option v-for="optionItem in item.selectOptions" :key="optionItem.value" :value="optionItem.value"
+                 :label="optionItem.label" />
+    </el-select>
+
+<!--    选择对象-->
+    <el-select v-else-if="item.type === 'selectOfSysObjectDef'" v-model="item.value"
+               :placeholder="item.placeholder || '请选择'" :size="size || 'default'"
+               :filterable="item.filterable ? true : false" :clearable="item.clearable || true" :disabled="item.disabled || false"
+               :readonly="item.readonly||false"
+               :multiple="item.multiple"
+               style="width: 100%" class="form-item" @change="
+                item.onChange
+                  ? item.onChange(item.value, item.associatedOption || '')
+                  : onSelectChange(item)
+              ">
+      <el-option v-for="optionItem in selSysObjectData" :key="optionItem.value" :value="optionItem.value"
+                 :label="optionItem.label" />
+    </el-select>
+
+
+    <el-date-picker v-else-if="item.type === 'date-range'" v-model="item.value" type="daterange"
+                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="form-item"
+                    :readonly="item.readonly||false"
+                    :disabled="item.disabled || false" style="width: 100%" :size="size || 'default'" />
+
+
+
+
+
+    <el-date-picker v-else-if="item.type === 'date'" v-model="item.value" type="date"
+                    :readonly="item.readonly||false"
+                    style="width: 100%"
+                    value-format="YYYY-MM-DD"
+                    format="YYYY-MM-DD"
+                    :disabled="item.disabled || false"
+                    range-separator="-" :placeholder="item.placeholder || '请选择日期'"
+                    class="form-item" :size="size || 'default'" />
+
+
+    <el-date-picker v-else-if="item.type === 'month'" v-model="item.value" type="month"
+                    :readonly="item.readonly||false"
+                    style="width: 100%"
+                    value-format="YYYY-MM"
+                    format="YYYY-MM"
+                    :disabled="item.disabled || false"
+                    range-separator="-" :placeholder="item.placeholder || '请选择'"
+                    class="form-item" :size="size || 'default'" />
+    <el-date-picker v-else-if="item.type === 'datetime'" v-model="item.value" type="datetime"
+                    :readonly="item.readonly||false"
+                    :disabled="item.disabled || false" :placeholder="item.placeholder || '请选择日期'" class="form-item"
+                    :size="size || 'default'" />
+    <el-time-picker v-else-if="item.type === 'time'" v-model="item.value" arrow-control
+                    :readonly="item.readonly||false"
+                    :picker-options="{
+              selectableRange: '00:00:00 - 23:59:59',
+            }" :disabled="item.disabled || false" :placeholder="item.placeholder || '请选择时间'" class="form-item"
+                    :size="size || 'default'" />
+    <el-radio-group v-if="item.type === 'radio-group'" v-model="item.value" :disabled="item.disabled || false"
+                    :size="size || 'default'" @change="
+                item.onChange
+                  ? item.onChange(item.value, item.associatedOption || '')
+                  : () => { }
+              ">
+<!--      <div v-show="item.optionType==='row'" style="width: 100%;height:8px"></div>-->
+      <component :is="item.style === 'button' ? 'el-radio-button' : 'el-radio'"
+                 :class="item.optionType==='row'?'row-option':''"
+                 v-for="optionItem of item.radioOptions" :key="optionItem.value" :label="optionItem.value">{{
+          optionItem.label
+        }}
+        <span v-show="optionItem.description" class="option-description">{{ optionItem.description }}</span> <!-- 这里是选项后面的说明文字 -->
+      </component>
+    </el-radio-group>
+    <el-checkbox-group v-if="item.type ==='checkbox'" v-model="item.value"
+                       :readonly="item.readonly||false"
+                       :disabled="item.disabled || false" :size="size || 'default'" @change="
+                item.onChange
+                  ? item.onChange(item.value, item.associatedOption || '')
+                  : () => { }
+              ">
+      <div v-show="item.optionType==='row'" style="width: 100%;height:8px"></div>
+      <component :is="
+                item.style === 'button' ? 'el-checkbox-button' : 'el-checkbox'"
+                :class="item.optionType==='row'?'row-option':''"
+                 v-for="optionItem of item.checkOptions" :key="optionItem.value" :label="optionItem.value">{{
+          optionItem.label
+        }}
+        <span v-show="optionItem.description" class="option-description">{{ optionItem.description }}</span> <!-- 这里是选项后面的说明文字 --> </component>
+    </el-checkbox-group>
+    <el-switch v-if="item.type === 'switch'" v-model="item.value" :disabled="item.disabled || false"
+               :size="size || 'default'" @change="
+                item.onChange
+                  ? item.onChange(item.value, item.associatedOption || '')
+                  : () => { }
+              ">
+    </el-switch>
+    <!--            分区域-->
+
+    <!-- 普通文本 -->
+    <span v-else-if="item.type === 'span'">
+              {{ item.value }}
+            </span>
+
+
+
+
+  </div>
+
+
+</template>
+
+<script lang="ts">
+import { useForm } from "@/hooks";
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  onMounted,
+  PropType,
+  watch,
+} from "vue";
+import { FormRenderItem } from "./FormRender";
+import WangEditor from "@/components/businessComponent/wangEditor.vue";
+import QueryCommand from "@/utils/queryCommand";
+import SysConfigUtils from "@/utils/sysConfigUtils";
+import console from "console";
+
+export default defineComponent({
+  name: "baseFormItem",
+  components:{
+    WangEditor
+  },
+  props: {
+    size: {
+      type: String,
+      default: "default",
+    },
+    item: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    domainData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  setup(props, { expose,emit }) {
+    const { checkParams, resetParams, generatorParams } = useForm();
+    const innerFormItems = computed(() => {
+      return props.formItems;
+    });
+    function mCheckParams() {
+      return checkParams(innerFormItems.value);
+    }
+    function mResetParams() {
+      return resetParams(innerFormItems.value);
+    }
+    function mGeneratorParams() {
+      return generatorParams(innerFormItems.value);
+    }
+    function onSelectChange(item) {
+      if(item.value){
+        item.errorMessage=''
+      }
+      emit("onSelectChangeFun", item);
+    }
+      function  selectChange({ oldVal, val, changeIndex }, item) {
+        if(item.value){
+          item.errorMessage=''
+        }
+          if (item && item.selectChange) {
+              item.selectChange(item, { oldVal, val, changeIndex })
+          }
+      }
+
+
+    const selSysObjectData= ref([])
+
+    const getSysListForSelect = () => {
+      let params = {
+
+      };
+      let page: boolean | undefined = false;
+      let queryCommand = new QueryCommand({
+        url: SysConfigUtils.niftyUrl + "/pub/sys_object_def/list_for_select",
+      });
+      //执行查询操作
+      queryCommand.executeQuery({
+        params,
+        successFun: (backData: any) => {
+          console.log(backData, '班次选项')
+          backData.forEach((item, index) => {
+            item.label = item.objDes
+            item.value = item.objName
+          })
+          selSysObjectData.value = backData
+        },
+        errorFun: (backData: any) => {
+
+        },
+      });
+    };
+
+
+    function changeInput(item) {
+      // console.log(item,'changeiNPUT')
+      if(item.value){
+        item.errorMessage=''
+      }
+
+    }
+
+    onMounted(() => {
+      if(props.item.type==='selectOfSysObjectDef'){
+        getSysListForSelect()
+      }
+
+    });
+    expose({
+      checkParams: mCheckParams,
+      resetParams: mResetParams,
+      generatorParams: mGeneratorParams,
+    });
+    return {
+      selSysObjectData,
+      innerFormItems,
+      getSysListForSelect,
+      onSelectChange,
+        selectChange,
+      changeInput,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.form-item {
+  width: 100%;
+}
+.ring-block {
+  width: 3px;
+  height: 14px;
+  background: #00b3f3;
+}
+.option-description{
+  margin-left: 5px;
+  color: #A8ABB2; /* 说明文字的颜色，根据需要调整 */
+  font-size: 12px; /* 文字大小，根据需要调整 */
+}
+.row-option{
+  display: block; /* 使每个复选框独占一行 */
+  //margin-top: 8px; /* 为了更好的分隔，可以自定义间距 */
+}
+</style>