widget.qw 1.0.43 → 1.0.45

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "widget.qw",
   "private": false,
-  "version": "1.0.43",
+  "version": "1.0.45",
   "description": "marqstree Vue3组件库",
   "main": "build/widget.qw.es.js",
   "keywords": [

package/src/components/CascaderPicker.vue

@@ -111,7 +111,8 @@ watch(() => JSON.stringify(modelValue.value), async (n, o) => {
         data.selectedNodeId = modelValue.value
     } else {
         data.selectedNodes = []
-        modelValue.value.forEach(async(id) => {
+        let ids = modelValue.value || []
+        ids.forEach(async(id) => {
             let params = {}
             params.id = id
             params.isReturnParent = false

package/src/components/ObjsEditor.vue

@@ -0,0 +1,254 @@
+<template>
+    <div class="widget">
+        <div class="option" v-for="(item, index) in modelValue" :key="index">
+            <div style=" display: flex;align-items: center;">
+                <van-icon name="arrow-left" @click.stop="onForward(index)" />
+                <div style="padding: 5px 5px;">
+                    <div v-for="(k, j) in visiableKeys" :key="j" style="padding:2px 2px;">
+                        {{ `${key2name(k)}:${key2value(k, item)}` }}
+                    </div>
+                </div>
+
+                <div style="display: flex;flex-direction:column;cursor: pointer;">
+                    <van-icon name="edit" v-if="props.schema.auth != 'readonly'" @click.stop="onEdit(index)" />
+
+                    <van-icon name="arrow" @click.stop="onBack(index)" style="margin:8px 0" />
+
+                    <van-icon name="cross" v-if="props.schema.auth != 'readonly'" @click.stop="onDelete(index)" />
+                </div>
+            </div>
+        </div>
+
+        <van-icon name="plus" v-if="props.isShowAdd && !data.isShowInput" @click="onNewOption" />
+
+        <van-form v-if="data.isShowInput" :model="data.inputValue">
+            <van-field v-for="(key, i) in keys" :key="i" :label="props.schema[key].label"
+                v-show="props.schema[key].auth != 'gone'" :required="props.schema[key].auth === 'required'"
+                :disabled="props.schema[key].auth === 'readonly'">
+
+                <template #input>
+                    <van-field v-if="props.schema[key].type == 'String' && !props.schema[key]?.schema?.options"
+                        v-model="data.inputValue[key]" :placeholder="`请输入${key2name(key)}`" type="text" />
+
+                    <van-field v-if="props.schema[key].type == 'Number' && !props.schema[key]?.schema?.options"
+                        v-model.number="data.inputValue[key]" :placeholder="`请输入${key2name(key)}`" type="number" />
+
+                    <van-switch v-if="props.schema[key].type == 'Boolean'" v-model="data.inputValue[key]" />
+
+                    <DatetimePicker v-if="props.schema[key].type == 'Datetime'" v-model="data.inputValue[key]"
+                        placeholder="选择时间" />
+
+                    <DateSelector v-if="props.schema[key]?.schema?.options" 
+                        v-model="data.inputValue[key]"
+                        :options="props.schema[key]?.schema?.options" 
+                        :placeholder="`请输入${key2name(key)}`" :columnsFieldNames="{
+                            text: (props.schema[key]?.schema?.options || []).length > 0 ? Object.keys(props.schema[key].schema.options[0])[0] : '',
+                            value: (props.schema[key]?.schema?.options || []).length > 0 ? Object.keys(props.schema[key].schema.options[0])[1] : ''
+                        }" @select="onChangeOption(key)" />
+
+                    <ObjsEditor v-if="props.schema[key].type == 'Array' && props.schema[key].auth != 'gone'"
+                        v-model="data.inputValue[key]" :schema="props.schema[key].schema" />
+                </template>
+            </van-field>
+
+            <div style="margin: 16px; display: flex;align-items: center;justify-content: center;">
+                <van-button v-if="data.isShowInput" @click="onInputConfirm" type="primary" size="mini">保存</van-button>
+                <van-button v-if="data.isShowInput" @click="onInputCancel" type="primary" size="mini">取消</van-button>
+            </div>
+        </van-form>
+
+    </div>
+</template>
+
+<script setup>
+import { nextTick, ref, onMounted, defineProps, defineEmits, reactive, computed } from 'vue'
+import { useVModel } from '@vueuse/core'
+import util from '@/util'
+import DatetimePicker from './DatetimePicker/index.vue'
+import DateSelector from './data_selector.vue'
+
+const props = defineProps({
+    modelValue: {
+        type: Array,
+        default: []
+    },
+    isShowAdd: {
+        type: Boolean,
+        default: true
+    },
+    schema: {
+        type: Object,
+        default: {
+            type: "String",
+            label: '名称',
+            default: '',
+            //权限取值范围: required 必填 option 选填 readonly 只读 gone 隐藏
+            auth: 'option'
+        }
+    }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const modelValue = useVModel(props, 'modelValue', emit)
+
+const data = reactive({
+    inputValue: {},
+    isShowInput: false,
+    selectIndex: -1
+})
+const keys = Object.keys(props.schema)
+const visiableKeys = keys.filter(k => props.schema[k].auth != 'gone')
+
+onMounted(() => {
+    init()
+})
+
+const init = () => {
+    if (modelValue.value)
+        return
+
+    modelValue.value = []
+}
+
+const makeDefaultValue = () => {
+    let res = {}
+
+    keys.forEach(key => {
+        // 复制默认值，防止对象类型的默认值被修改
+        if (props.schema[key].default === 'uuid')
+            res[key] = util.uuid8()
+        else
+            res[key] = JSON.parse(JSON.stringify(props.schema[key].default))
+    })
+
+    return res
+}
+
+const onForward = (index) => {
+    util.arySwapPrev(modelValue.value, index)
+}
+
+const onBack = (index) => {
+    util.arySwapNext(modelValue.value, index)
+}
+
+const onDelete = (index) => {
+    modelValue.value.splice(index, 1)
+}
+
+const key2name = (key) => {
+    return props.schema[key].label
+}
+
+const key2value = (key, item) => {
+    console.log('key2value', key, item[key], item)
+
+    let v = item[key]
+    if (Array.isArray(v)) {
+        let formatValues = v.map(e => {
+            let kvs = Object.keys(e).map(k => {
+                let label = props.schema[key].schema[k].label
+                let formatValue = e[k]
+
+                //下拉框选项，用选项的第二个属性value找选中的选项
+                //再取选项的第一个属性name作为标题
+                if (props.schema[key].schema[k]?.schema?.options) {
+                    let one = props.schema[key].schema[k]?.schema?.options.find(item => item[Object.keys(item)[1]] === formatValue)
+                    formatValue = one[Object.keys(one)[0]]
+                }
+                return `${label}:${formatValue}`
+            })
+            return kvs.join(',')
+        })
+
+        return formatValues.join(' > ')
+    }
+    //下拉框选项，用选项的第二个属性value找选中的选项
+    //再取选项的第一个属性name作为标题
+    else if (props.schema[key]?.schema?.options) {
+        let one = props.schema[key]?.schema?.options.find(item => item[Object.keys(item)[1]] === v)
+        return one[Object.keys(one)[0]]
+    }
+    else {
+        return v
+    }
+}
+
+const onEdit = (index) => {
+    data.isShowInput = true
+    data.selectIndex = index
+    data.inputValue = modelValue.value[data.selectIndex]
+}
+
+const onNewOption = () => {
+    data.selectIndex = -1
+    data.inputValue = makeDefaultValue()
+    data.isShowInput = true
+}
+
+const onInputConfirm = () => {
+    let idx = modelValue.value.indexOf(item => JSON.stringify(item) === JSON.stringify(data.inputValue))
+    if (idx > -1 && idx != data.selectIndex) {
+        util.warnToast('重复添加')
+        return
+    }
+
+    if (!data.inputValue) {
+        data.isShowInput = false
+        data.inputValue = makeDefaultValue()
+        return
+    }
+
+    if (data.selectIndex < 0) {
+        modelValue.value.push(data.inputValue)
+    } else {
+        modelValue.value[data.selectIndex] = data.inputValue
+    }
+
+    data.isShowInput = false
+    data.inputValue = makeDefaultValue()
+}
+
+const onInputCancel = () => {
+    data.isShowInput = false
+    data.inputValue = makeDefaultValue()
+}
+
+const onChangeOption = (key) => {
+    console.log('onChangeOption', key, data.inputValue[key], props.schema[key]?.schema?.options)
+    let val = data.inputValue[key]
+    let options = props.schema[key].schema.options
+
+    //用选中对象给输入项的同名属性值赋值
+    let option = options.find(item => item[Object.keys(item)[1]] === val)
+    Object.keys(option).forEach(k => {
+        if (props.schema[k])
+            data.inputValue[k] = option[k]
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+.widget {
+    background: #fff;
+    box-sizing: border-box;
+    height: 100%;
+    text-align: left;
+
+    .option {
+        margin: 8px 8px;
+        padding: 5px 5px;
+        border-radius: 4px;
+        background-color: rgb(217, 236, 255);
+        color: #409eff;
+        display: inline-block;
+        position: relative;
+    }
+
+}
+
+:deep(.van-field__label) {
+    margin:auto;
+
+}
+</style>

package/src/components/data_selector.vue

@@ -83,6 +83,13 @@ const props = defineProps({
   modelValue: {
     type: [Array, String, Number]
   },
+  columnsFieldNames:{
+    type:Object,
+    default:{
+      text:'text',
+      value:'value'
+    }
+  },
   rules: {
     type: Array,
     default: () => []
@@ -118,6 +125,17 @@ const searchKeyword = ref(null);
 const checkboxRefs = ref([]);
 const checkedValue = ref([]);
 const isAllChecked = ref(false);
+const formatOptions = computed(()=>{
+  if(!props.options)
+    return []
+
+  return props.options.map(item=>{
+    return {
+      text:item[props.columnsFieldNames.text],
+      value:item[props.columnsFieldNames.value]
+    }
+  })
+})
 
 const findTextsByValues = (valuesToFind, data) => {
   return valuesToFind.map((value) => {
@@ -127,20 +145,20 @@ const findTextsByValues = (valuesToFind, data) => {
 };
 
 const values2items = (values)=>{
-  if(!values || values.length<1 || !props.options || props.options.length<1)
+  if(!values || values.length<1 || !formatOptions.value || formatOptions.value.length<1)
     return []
 
-  let res = props.options.filter(option=>values.includes(option.value))
+  let res = formatOptions.value.filter(option=>values.includes(option.value))
   return res
 }
 
 const reShow = () => {
   if (props.modelValue) {
-    if (Array.isArray(props.options)) {
+    if (Array.isArray(formatOptions.value)) {
       if (props.multiple) {
-        selectedItems.value = findTextsByValues(props.modelValue, props.options);
+        selectedItems.value = findTextsByValues(props.modelValue, formatOptions.value);
       } else {
-        const foundItem = props.options.find((item) => item.value === props.modelValue);
+        const foundItem = formatOptions.value.find((item) => item.value === props.modelValue);
         selectedItems.value = foundItem ? [foundItem.text] : [];
       }
     }
@@ -180,11 +198,11 @@ const cancelSelection = () => {
 
 const confirmSelection = () => {
   if (props.multiple) {
-    selectedItems.value = findTextsByValues(checkedValue.value, props.options);
+    selectedItems.value = findTextsByValues(checkedValue.value, formatOptions.value);
     emit("update:modelValue", checkedValue.value);
     emit("select",values2items(checkedValue.value))
   } else {
-    const foundItem = props.options.find((item) => item.value === checkedValue.value);
+    const foundItem = formatOptions.value.find((item) => item.value === checkedValue.value);
     selectedItems.value = foundItem ? [foundItem.text] : [];
     emit("update:modelValue", checkedValue.value);
     emit("select", foundItem)
@@ -205,7 +223,7 @@ const radioToggle = (value) => {
 };
 
 const filteredColumns = computed(() => {
-  return props.options.filter((item) => {
+  return formatOptions.value.filter((item) => {
     return item.text.includes(searchKeyword.value) || item.value.includes(searchKeyword.value);
   });
 });
@@ -228,7 +246,7 @@ watch(() => props.modelValue, (newVal) => {
 }, { deep: true, immediate: true });
 
 // 在options变化时也需要更新显示
-watch(() => props.options, () => {
+watch(() => formatOptions.value, () => {
   reShow();
 }, { deep: true });
 </script>

package/src/components/index.js

@@ -27,6 +27,7 @@ import TreePicker from './TreePicker.vue'
 import CascaderPop from './CascaderPop.vue'
 import CascaderPicker from './CascaderPicker.vue'
 import SingleApiPicker from "./SingleApiPicker.vue";
+import ObjsEditor from './ObjsEditor.vue'
 
 const components = [
   {
@@ -137,6 +138,10 @@ const components = [
     name: 'WidgetQwSingleApiPicker',
     widget: SingleApiPicker
   },
+  {
+    name: "WidgetQwObjsEditor",
+    widget: ObjsEditor,
+  },
 ];
 // 导出组件
 export const WidgetQw = {
@@ -149,7 +154,7 @@ export const WidgetQw = {
 
 // 导出初始化方法
 export function setup(params) {
-  Object.keys(params).forEach(key=>{
+  Object.keys(params).forEach(key => {
     vm[key] = params[key]
   })
 }

package/src/env.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/router/index.ts

@@ -149,6 +149,11 @@ const routes: Array<RouteRecordRaw> = [
     path: "/singleapipicker",
     name: "singleapipicker",
     component: () => import("../views/singleapipicker/index.vue"),
+  },
+  {
+    path: "/objseditor",
+    name: "objseditor",
+    component: () => import("../views/objseditor/index.vue"),
   }
 ]
 

package/src/util/index.js

@@ -10,6 +10,7 @@ import * as ToastUtil from './toast_util'
 import * as EvalUtil from './eval_util'
 import * as ImageUtil from './image_util'
 import * as TreeUtil from './tree_util'
+import * as UuidUtil from './uuid_util'
 
 export default {
     ...AuthUtil,
@@ -23,6 +24,7 @@ export default {
     ...EvalUtil,
     ...ImageUtil,
     ...TreeUtil,
+    ...UuidUtil,
 
     href(url) {
         window.location.href = url

package/src/util/uuid_util.js

@@ -0,0 +1,9 @@
+export function uuid8() {
+  // 获取当前时间戳的后 8 位十六进制
+  let hex = Date.now().toString(16).slice(-8);
+  // 如果不足 8 位则补全
+  if (hex.length < 8) {
+    hex = '0'.repeat(8 - hex.length) + hex;
+  }
+  return hex;
+}

package/src/views/objseditor/index.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="page">
+        <widget-qw-objs-editor v-model="data.datas" :schema="data.schema" />
+    </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, watch } from "vue";
+
+const data = reactive({
+    schema: {
+        id:{
+            label: 'id',
+            type: 'String',
+            // 自动生成8位uuid默认值
+            default: 'uuid',
+            //此字段是隐藏值
+            auth: 'gone',
+        },
+        name: {
+            label: '房号',
+            type: 'String',
+            default: '',
+            auth:'required'
+        },
+        finishQuantity:{
+            label: '完成数量',
+            type: 'Number',
+            default: 0,
+            auth: 'readonly'
+        },
+        quantity:{
+            label: '每天最多完成数量',
+            type: 'Number',
+            default: 0,
+            auth: 'option'
+        },
+        parts: {
+            label: '空调',
+            type: 'Array',
+            default: [],
+            auth:'required',
+            schema: {
+                partStandardId: {
+                    label: '名称',
+                    type: 'String',
+                    default: '',
+                    schema: {
+                        options: [{
+                            name:'内机',
+                            value: 'nj',
+                            title: '内机'
+                        }]
+                    }
+                },
+                quantity: {
+                    label: '数量',
+                    type: 'Number',
+                    default: 1,
+                }
+            }
+        }
+    },
+    // schema: {
+    //     title: {
+    //         label: '标题',
+    //         type: 'String',
+    //         default: ''
+    //     },
+    //     time: {
+    //         label: '时间',
+    //         type: 'Datetime',
+    //         default: ''
+    //     },
+    //     quantity: {
+    //         label: '数量',
+    //         type: 'Number',
+    //         default: 1
+    //     },
+    //     isFinish: {
+    //         label: '完成',
+    //         type: 'Boolean',
+    //         default: true
+    //     },
+    //     stages: {
+    //         label: '工序',
+    //         type: 'Array',
+    //         default: [],
+    //         schema: {
+    //             title: {
+    //                 label: '名称',
+    //                 type: 'String',
+    //                 default: ''
+    //             },
+    //             hour: {
+    //                 label: '工时',
+    //                 type: 'Number',
+    //                 default: '1'
+    //             },
+    //         }
+    //     },
+    //     permission: {
+    //         label: '权限',
+    //         type: 'String',
+    //         default: '',
+    //         schema: {
+    //             options: [
+    //                 {
+    //                     name: '查询所有工资单',
+    //                     value: 'salary_query_total',
+    //                     title: '查询所有工资单',
+
+    //                 },
+    //                 {
+    //                     name: '查询项目利润',
+    //                     value: 'project_profit',
+    //                     title: '查询项目利润'
+    //                 }
+    //             ]
+    //         }
+    //     },
+    //     role: {
+    //         label: "角色",
+    //         type: "String",
+    //         default: ""
+    //     },
+    //     permissions: {
+    //         label: "权限列表",
+    //         type: "Array",
+    //         default: [],
+    //         schema: {
+    //             title: {
+    //                 label: "名称",
+    //                 type: "String",
+    //                 default: ""
+    //             },
+    //             value: {
+    //                 label: "值",
+    //                 type: "String",
+    //                 default: "",
+    //                 // 注意:选项列表一定要放在值属性下面
+    //                 schema: {
+    //                     options: [
+    //                         {
+    //                             title: "查询所有工资单",
+    //                             value: "salary_query_total"
+    //                         },
+    //                         {
+    //                             title: "查询项目利润",
+    //                             value: "project_profit"
+    //                         }
+    //                     ]
+    //                 }
+    //             }
+    //         }
+    //     }
+    //},
+    datas: [],
+})
+
+watch(() => data.datas, (n, o) => {
+    console.log('>>>>', n)
+}, {
+    immediate: true
+})
+</script>
+
+<style lang="scss" scoped>
+.page {
+    height: 100vh;
+    background: #fff;
+    text-align: center;
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: 80px 15px 0 15px;
+    box-sizing: border-box;
+}
+</style>

package/tsconfig.json

@@ -1,19 +1,19 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "jsx": "preserve",
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
-    "skipLibCheck": true,
-    "allowJs": true,
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true,
+    "allowJs": true,
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -1,8 +1,8 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}