增加新的组件w-ext-radio

io.sc.platform.core.frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "platform-core",
-  "version": "8.2.50",
+  "version": "8.2.52",
   "description": "前端核心包,用于快速构建前端的脚手架",
   "//main": "库的主文件",
   "main": "dist/platform-core.js",

io.sc.platform.core.frontend/src/platform/components/grid/ts/computed/ComputedManager.ts

@@ -140,9 +140,15 @@ export class ComputedManager extends Base {
       availableHeight -= otherHeight + otherHeight2;
       availableHeight -= 2; //无数据增加的title行，下边框所占边框
 
-      style = {
-        height: this.props.height > 0 ? this.props.height - otherHeight2 - 1 + 'px' : availableHeight > 0 ? availableHeight + 'px' : '0px',
-      };
+      if (this.props.height > 0) {
+        style = {
+          height: this.props.height - otherHeight2 - 2 + 'px',
+        };
+      } else {
+        style = {
+          height: availableHeight > 0 ? availableHeight + 'px' : '0px',
+        };
+      }
     }
     if (this.table?.store.resizeFlag) {
       return style;

io.sc.platform.core.frontend/src/platform/components/index.ts

@@ -31,6 +31,7 @@ import WPassword from './password/WPassword.vue';
 import WFile from './file/WFile.vue';
 import WLabel from './label/WLabel.vue';
 import WRadio from './radio/WRadio.vue';
+import WExtRadio from './radio/WExtRadio.vue';
 import WTextEditor from './text-editor/WTextEditor.vue';
 import WQueryBuilder from './query-builder/WQueryBuilder.vue';
 
@@ -97,6 +98,7 @@ export default {
     app.component('WFile', WFile);
     app.component('WLabel', WLabel);
     app.component('WRadio', WRadio);
+    app.component('WExtRadio', WExtRadio);
     app.component('WTextEditor', WTextEditor);
     app.component('WQueryBuilder', WQueryBuilder);
 
@@ -152,6 +154,8 @@ export {
   WOrgSelect,
   WRoleSelect,
   WLabel,
+  WRadio,
+  WExtRadio,
   WDate,
   WCheckbox,
   WPassword,

io.sc.platform.core.frontend/src/platform/components/label/WLabel.vue

@@ -1,7 +1,10 @@
-<template><span v-if="props.required" style="color: red">*</span> {{ props.label }}</template>
+<template>
+  <span :style="props.size ? 'font-size:' + props.size + 'px;' : ''"> <span v-if="props.required" style="color: red">*</span> {{ props.label }} </span>
+</template>
 <script setup lang="ts">
 const props = defineProps({
   required: { type: Boolean, default: false },
   label: { type: String, default: '' },
+  size: { type: Number, default: undefined },
 });
 </script>

io.sc.platform.core.frontend/src/platform/components/radio/WExtRadio.vue

@@ -0,0 +1,105 @@
+<template>
+  <div v-show="fieldMethodsClass.getShow(props, modelValue)" class="w-ext-radio">
+    <w-label :required="fieldMethodsClass.getRequired(props, modelValue)" :label="attrs.label" :size="16"></w-label>
+    <div class="w-ext-radios">
+      <template v-for="opt in props.options" :key="opt.value">
+        <q-radio
+          v-model="modelValue"
+          :label="opt['label']"
+          :val="opt['value']"
+          :dense="props.dense"
+          :disable="fieldMethodsClass.getDisable(props, modelValue)"
+        />
+        <w-textarea
+          v-if="opt['desc'] && modelValue === opt['value']"
+          v-model="descModelValue"
+          :label="opt['desc']['label'] || '选项说明'"
+          class="desc"
+          :rows="3"
+          :required-if="opt['desc']['requiredIf']"
+          :read-only-if="fieldMethodsClass.getDisable(props, modelValue)"
+        >
+        </w-textarea>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { ref, useAttrs } from 'vue';
+import { FormFieldMethods } from '../form/FormField';
+
+const radioRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string | boolean | number>();
+const descModelValue = ref('');
+
+interface FieldProps extends FormFieldProps {
+  dense?: boolean;
+  options: Array<() => void>;
+}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+  dense: true,
+  options: () => {
+    return [];
+  },
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return radioRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = undefined;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+const getDescValue = () => {
+  return descModelValue.value;
+};
+const setDescValue = (val: any) => {
+  descModelValue.value = val;
+};
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+  getDescValue: getDescValue,
+  setDescValue: setDescValue,
+});
+</script>
+
+<style lang="css">
+.w-ext-radio .w-ext-radios {
+  display: grid;
+}
+.w-ext-radio .desc {
+  padding-left: 18px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-right: 5px;
+}
+.w-ext-radio .q-radio--dense .q-radio__label {
+  padding-left: 15px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-right: 3px;
+}
+</style>

io.sc.platform.core.frontend/src/platform/index.ts

@@ -151,6 +151,8 @@ export {
   WUserSelect,
   WRoleSelect,
   WLabel,
+  WRadio,
+  WExtRadio,
   WDate,
   WCheckbox,
   WPassword,