Ver Fonte

修改bug

huangxw há 4 dias atrás
pai
commit
ca509fcf94

+ 1 - 0
src/assets/styles/public.scss

@@ -126,6 +126,7 @@ $colors: (
     // 橙色
     --orange: #ffa500;
 }
+
 // 首行缩进2个字符
 .text-indent-2 {
     text-indent: 2em;

+ 46 - 8
src/components/ut-action-sheet/ut-action-sheet.vue

@@ -1,16 +1,37 @@
 <template>
-    <picker :range="options" range-key="name" @change="selectChange" :disabled="false">
-        <slot></slot>
-    </picker>
+    <template v-if="mode === 'picker'">
+        <picker :range="options" range-key="name" @change="selectChange" :disabled="false">
+            <slot></slot>
+        </picker>
+    </template>
+    <template v-else-if="mode === 'custom'">
+        <view @click="showModel = true" class="flex1">
+            <slot></slot>
+        </view>
+        <up-popup v-model:show="showModel" mode="center" round="30rpx" closeable @close="showModel = false">
+            <view class="w-700">
+                <view class="pd-24">
+                    <view class="f-s-32 c-#333 f-w-500">{{ title }}</view>
+                </view>
+                <scroll-view scroll-y style="max-height: 70vh">
+                    <view class="pd3-10-24-24">
+                        <ut-row gap="16rpx">
+                            <template v-for="(item, index) in options" :key="index">
+                                <ut-col :span="item.span">
+                                    <view class="">{{ item?.name }}</view>
+                                </ut-col>
+                            </template>
+                        </ut-row>
+                    </view>
+                </scroll-view>
+            </view>
+        </up-popup>
+    </template>
 </template>
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue';
 
 const props = defineProps({
-    show: {
-        type: Boolean,
-        default: false,
-    },
     modelValue: {
         type: Array,
         default: () => [],
@@ -28,16 +49,29 @@ const props = defineProps({
         type: Array,
         default: () => [],
     },
+    mode: {
+        type: String,
+        default: 'picker', // 原生 picker 模式 或自定义弹窗模式 custom
+    },
+    // 是否多选
+    multiple: {
+        type: Boolean,
+        default: false, // 只有自定义弹窗模式下生效
+    },
 });
+
 const options = computed(() => {
+    console.log(props.tabs);
+
     return props.tabs.map((item: any) => {
         return {
             name: item.label,
             value: item.value,
+            span: item.elTagClass || 10,
         };
     });
 });
-const showModel = ref(props.show);
+const showModel = ref(false);
 const emit = defineEmits(['close', 'confirm', 'open', 'update:show', 'update:modelValue', 'change']);
 const checkeds = ref({});
 const close = () => {
@@ -61,5 +95,9 @@ watch(
     (newVal) => {},
     { immediate: true }
 );
+onMounted(() => {
+    // 初始化已选择项
+    console.log(props.tabs);
+});
 </script>
 <style lang="scss" scoped></style>

+ 66 - 0
src/components/ut-col/ut-col.vue

@@ -0,0 +1,66 @@
+<template>
+	<view class="ut-col" :style="colStyle">
+		<slot />
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, unref } from 'vue';
+
+interface UtColProps {
+	/** 占用份数(列宽),最大不超过 30 */
+	span?: number;
+}
+
+const props = withDefaults(defineProps<UtColProps>(), {
+	span: 10,
+});
+
+const ROW_INJECT_KEY = 'ut-row-context';
+
+const rowContext = inject<any>(ROW_INJECT_KEY, null);
+
+const colStyle = computed(() => {
+	const styles: Record<string, string> = {};
+	if (!rowContext) return styles;
+    console.log(rowContext.gap);
+	
+	const columns = Number(unref(rowContext.columns) || 0);
+	const gap = Number(unref(rowContext.gap) || 0);
+	const span = props.span || 0;
+
+	if (columns > 0 && span > 0) {
+		const percent = (span / columns) * 100;
+		styles.flex = `0 0 ${percent}%`;
+		styles.maxWidth = `${percent}%`;
+	}
+
+	if (gap > 0) {
+		const half = `${gap / 2}px`;
+		styles.paddingLeft = half;
+		styles.paddingRight = half;
+		styles.paddingTop = half;
+		styles.paddingBottom = half;
+	}
+
+	return styles;
+});
+</script>
+<script  lang="ts">  
+export default {  
+  options: {  
+    // 微信小程序中 options 选项  
+    multipleSlots: true, //  在组件定义时的选项中启动多slot支持,默认启用  
+    styleIsolation: 'shared', //  启动样式隔离。当使用页面自定义组件,希望父组件影响子组件样式时可能需要配置。具体配置选项参见:微信小程序自定义组件的样式  
+    addGlobalClass: true, //  表示页面样式将影响到自定义组件,但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared  
+    virtualHost: true //  将自定义节点设置成虚拟的,更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等,而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定  
+  }  
+}  
+</script>
+<style scoped lang="scss">
+.ut-col {
+	min-width: 0; // 防止内容撑破
+	box-sizing: border-box;
+}
+</style>
+

+ 74 - 0
src/components/ut-row/ut-row.vue

@@ -0,0 +1,74 @@
+<template>
+	<view
+		class="ut-row"
+		:class="{ 'ut-row--wrap': wrap }"
+		:style="rowStyle"
+	>
+		<slot />
+	</view>
+</template>
+
+<script setup lang="ts">
+
+interface UtRowProps {
+	/** 总栅格份数,默认 30 */
+	columns?: number;
+	/** 列间距,字符串形式,可为数值字符串,内部转为 px */
+	gap?: string | number;
+	/** 是否允许换行 */
+	wrap?: boolean;
+}
+
+const props = withDefaults(defineProps<UtRowProps>(), {
+	columns: 30,
+	gap: '16rpx',
+	wrap: true,
+});
+
+const ROW_INJECT_KEY = 'ut-row-context';
+// 将 gap 统一转成 px 数值
+const gapPx = computed(() => {
+	const val = props.gap;
+	if (val === '' || val == null) return 0;
+	// 使用 uView 提供的 px 转换,兼容 rpx / rpx 字符串 / 数值字符串
+	// @ts-ignore
+	const fn = uni?.$u?.getPx;
+	if (typeof fn === 'function') return fn(val as any) || 0;
+	const n = Number(val);
+	return Number.isFinite(n) ? n : 0;
+});
+
+// 提供给 ut-col 使用的上下文
+provide(ROW_INJECT_KEY, {
+	columns: computed(() => props.columns),
+	gap: gapPx,
+});
+
+// 外层行样式:用负 margin 抵消子项 padding,实现水平 / 垂直间距
+const rowStyle = computed(() => {
+	const g = gapPx.value;
+	if (!g) return '';
+	const half = `${g / 2}px`;
+	return {
+		marginLeft: `-${half}`,
+		marginRight: `-${half}`,
+		marginTop: `-${half}`,
+		marginBottom: `-${half}`,
+	} as any;
+});
+
+defineExpose({ ROW_INJECT_KEY });
+</script>
+
+<style scoped lang="scss">
+.ut-row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.ut-row--wrap {
+	flex-wrap: wrap;
+}
+</style>
+

+ 1 - 1
src/manifest.json

@@ -56,7 +56,7 @@
     "quickapp": {},
     /* 小程序特有相关 */
     "mp-weixin": {
-        "appid": "wxf11517e71e36169f",
+        "appid": "wxd52c8780db580e84",
         "setting": {
             "urlCheck": false,
             "minified": true

+ 10 - 4
src/plant/storage/seed-source/info-edit/index.vue

@@ -6,9 +6,14 @@
         <view class="pd-24">
             <up-form class="p-rtv" labelPosition="top" :model="form" :rules="rules" labelWidth="auto" ref="upFormRef">
                 <!-- 基本信息 -->
-                <up-form-item borderBottom label="种源类型" required prop="seedType">
-                    <up-input v-model="form.seedType" placeholder="请输入种源类型" border="none" clearable></up-input>
-                </up-form-item>
+                <ut-action-sheet :tabs="pt_seed_type" mode="custom" v-model="form.seedType">
+                    <up-form-item borderBottom label="种源类型" required prop="seedType">
+                        <up-input v-model="form.seedType" placeholder="请输入种源类型" border="none" clearable></up-input>
+                        <template #right>
+                            <up-icon size="22rpx" color="#2A6D52" name="arrow-down-fill"></up-icon>
+                        </template>
+                    </up-form-item>
+                </ut-action-sheet>
                 <up-form-item borderBottom label="物种基原" required prop="varietyId">
                     <up-input v-model="form.varietyId" placeholder="请输入物种基原" border="none" clearable></up-input>
                 </up-form-item>
@@ -106,7 +111,8 @@
 <script setup lang="ts">
 import { useClientRequest } from '@/utils/request';
 import { seedInfoListType } from '../models/type';
-
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { pt_seed_type } = toRefs<any>(proxy?.useDict('pt_seed_type'));
 const paging = ref<any>(null);
 const upFormRef = ref<any>(null);
 const form = ref<seedInfoListType>({

+ 2 - 0
unocss.config.js

@@ -151,6 +151,8 @@ export default defineConfig({
         // 栅格 30份
         [/^hcol-([\.\d]+)$/, ([_, num]) => ({ width: `${(+num / 30) * 100}%` })],
         // border-w-4
+        // gcol-10-10 后面的数字是gap宽度
+        // 栅格30份加gap宽度
         [
             /^border-w-([\.\d]+)$/,
             ([_, num]) => ({