Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
037e7e2a 1 parent df485d59

新增性别判断规则

Inline Side-by-side
Showing 2 changed files with 25 additions and 9 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-02-01 11:18:31 4 + * @LastEditTime: 2023-12-19 16:05:16
5 * @FilePath: /data-table/src/components/GenderField/index.vue 5 * @FilePath: /data-table/src/components/GenderField/index.vue
6 * @Description: 性别选择控件 6 * @Description: 性别选择控件
7 --> 7 -->
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
19 :disabled="item.component_props.disabled" 19 :disabled="item.component_props.disabled"
20 > 20 >
21 <template #input> 21 <template #input>
22 - <van-radio-group v-model="item.value" :direction="item.component_props.direction" style="width: 100%"> 22 + <van-radio-group @change="onChange(item)" v-model="gender_value" :direction="item.component_props.direction" style="width: 100%">
23 <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper"> 23 <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper">
24 <van-radio :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor" 24 <van-radio :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
25 style="margin-bottom: 0.25rem">{{ x.title }}</van-radio> 25 style="margin-bottom: 0.25rem">{{ x.title }}</van-radio>
...@@ -46,9 +46,22 @@ const HideShow = computed(() => { ...@@ -46,9 +46,22 @@ const HideShow = computed(() => {
46 return !props.item.component_props.disabled 46 return !props.item.component_props.disabled
47 }) 47 })
48 48
49 +const gender_value = ref(props.item.component_props.default);
50 +
49 onMounted(() => { 51 onMounted(() => {
50 - props.item.value = props.item.component_props.default; 52 + gender_value.value = props.item.component_props.default ? props.item.component_props.default : '';
51 -}) 53 + // 发送自定义数据结构
54 + props.item.value = { key: props.item.key, value: gender_value.value, type: "gender" };
55 + emit("active", props.item.value);
56 +});
57 +
58 +const emit = defineEmits(["active"]);
59 +
60 +const onChange = (item) => {
61 + // 发送自定义数据结构
62 + props.item.value = { key: props.item.key, value: gender_value.value, type: "gender" };
63 + emit("active", props.item.value);
64 +}
52 </script> 65 </script>
53 66
54 <style lang="less" scoped> 67 <style lang="less" scoped>
......
1 <!-- 1 <!--
2 * @Date: 2022-07-18 10:22:22 2 * @Date: 2022-07-18 10:22:22
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-12 16:42:06 4 + * @LastEditTime: 2023-12-19 16:06:34
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -434,19 +434,22 @@ const checkRules = () => { ...@@ -434,19 +434,22 @@ const checkRules = () => {
434 434
435 // 操作绑定自定义字段回调 435 // 操作绑定自定义字段回调
436 const onActive = (item) => { 436 const onActive = (item) => {
437 - if (item.key === "image_uploader") { 437 + if (item?.key === "image_uploader") {
438 postData.value[item.filed_name] = item.value; 438 postData.value[item.filed_name] = item.value;
439 } 439 }
440 - if (item.key === "file_uploader") { 440 + if (item?.key === "file_uploader") {
441 postData.value[item.filed_name] = item.value; 441 postData.value[item.filed_name] = item.value;
442 } 442 }
443 // if (item.key === "sign") { 443 // if (item.key === "sign") {
444 // postData.value[item.filed_name] = item.value; 444 // postData.value[item.filed_name] = item.value;
445 // } 445 // }
446 - if (item.type === "radio") { // 单选控件 446 + if (item?.type === "radio") { // 单选控件
447 postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value }); 447 postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value });
448 } 448 }
449 - if (item.type === "checkbox") { // 多选控件 449 + if (item?.type === "gender") { // 性别控件
450 + postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value });
451 + }
452 + if (item?.type === "checkbox") { // 多选控件
450 const checkbox_value = _.cloneDeep(item.value) 453 const checkbox_value = _.cloneDeep(item.value)
451 checkbox_value.forEach((element, index) => { 454 checkbox_value.forEach((element, index) => {
452 for (const key in item.affix) { 455 for (const key in item.affix) {
......