常规管理timepicker 优化

src/utils/validTools.ts

@@ -67,7 +67,6 @@ const res: Res = { isValid: true, errMsg: '' };
 export const validateType = (rules, val) => {
   const isValid = rules.every((item) => {
     const reg = new RegExp(regexEnum[item]);
-    console.log(`reg`, reg);
     res.errMsg = errMsg[item];
     return reg.test(val);
   });

src/views/general/config/customComponents/ArrayCom.vue

@@ -24,13 +24,14 @@
   import { defineComponent, onMounted, reactive, toRefs } from 'vue';
   import { Input } from 'ant-design-vue';
   import Sortable from 'sortablejs';
+  // import draggable from 'vuedraggable'
 
   interface Data {
     name: string;
     value: string;
   }
   const props = {
-    value: { type: Object, default: {} },
+    value: { type: Array, default: [] },
     tip: { type: String, default: '' },
   };
 
@@ -39,15 +40,22 @@
     props,
     emits: ['change'],
     setup(props, { emit }) {
+      console.log(`props`, props.value);
       const state = reactive({
         list: [] as Data[],
       });
 
       // 初始化 sortable 实现拖动
       function initSortable() {
-        for (let k in props.value) {
-          state.list.push({ name: k, value: props.value[k] });
-        }
+        // for (let k in props.value) {
+        //   state.list.push({ name: k, value: props.value[k] });
+        // }
+        state.list = [];
+        props.value.map((item: Object) => {
+          for (let k in item) {
+            state.list.push({ name: k, value: item[k] });
+          }
+        });
         // state.list = props.value as object[];
         const el = document.querySelector('.array-item') as any;
         Sortable.create(el, {
@@ -70,19 +78,16 @@
             console.log(`移动前的位置索引`, evt.oldIndex);
             console.log(`移动后的位置索引`, evt.newIndex);
             // // const newIndex = evt.newIndex as number;
-            // const oldIndex = evt.oldIndex as number;
-            // const newIndex = evt.newIndex as number;
-            // const current = state.list[oldIndex];
-            // const list: object[] = [];
-            // state.list.map((item, index) => {
-            //   if (index != oldIndex) {
-            //     list.push(item);
-            //   }
-            // });
-            // list.splice(newIndex, 0, current);
-            // console.log(`list`, list);
-            // state.list = list;
-            // console.log(`list`, state.list);
+            const oldIndex = evt.oldIndex as number;
+            const newIndex = evt.newIndex as number;
+            const current = state.list[oldIndex];
+            state.list.splice(oldIndex, 1);
+            state.list.splice(newIndex, 0, current);
+            console.log(`state.list`, state.list);
+            const data = formatList();
+            console.log(`data`, data);
+            emit('change', data);
+            initSortable();
           },
         });
       }
@@ -90,16 +95,18 @@
         initSortable(); // 开启拖拽功能
       });
 
-      function formateList() {
-        const data = {};
+      function formatList() {
+        const data: object[] = [];
         state.list.map((item) => {
-          data[item.name] = item.value;
+          const obj = {};
+          obj[item.name] = item.value;
+          data.push(obj);
         });
         return data;
       }
 
       function onChange() {
-        const data = formateList();
+        const data = formatList();
         emit('change', data);
       }
       function create() {
@@ -107,7 +114,7 @@
       }
       function remove(i) {
         state.list.splice(i, 1);
-        const data = formateList();
+        const data = formatList();
         emit('change', data);
       }
 

src/views/general/config/customComponents/DatePicker.vue

@@ -36,7 +36,6 @@
       }
 
       function onChange(val) {
-        console.log(`val`, val);
         emit('change', val);
       }
       return {

src/views/general/config/customComponents/InputNumber.vue

@@ -48,7 +48,6 @@
         reactData.tip = '';
         if (props.rules && props.rules[0]) {
           const res = validateType(props.rules, e.target.value);
-          console.log(`res`, res);
           reactData.error = res.errMsg;
         }
       }

src/views/general/config/customComponents/InputTextArea.vue

@@ -49,7 +49,6 @@
         reactData.tip = '';
         if (props.rules && props.rules[0]) {
           const res = validateType(props.rules, e.target.value);
-          console.log(`res`, res);
           reactData.error = res.errMsg;
         }
       }

src/views/general/config/customComponents/TimePicker.vue

@@ -2,7 +2,7 @@
   <div class="wrap-time">
     <TimePicker
       class="time-picker"
-      :value="moment(value, 'HH:mm:ss')"
+      :value="value"
       @focus="onFocus"
       @change="onChange"
       @blur="onBlur"
@@ -16,7 +16,7 @@
   import moment from 'moment';
 
   const props = {
-    value: { type: String, default: '' },
+    value: { type: Object, default: {} },
     tip: { type: String, default: '' },
   };
 

src/views/general/config/data.ts

@@ -1,6 +1,7 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Form/index';
 import { h } from 'vue';
+import moment from 'moment';
 import Input from './customComponents/Input.vue';
 import InputTextArea from './customComponents/InputTextArea.vue';
 import InputNumber from './customComponents/InputNumber.vue';
@@ -53,7 +54,6 @@ export const columns: BasicColumn[] = [
             onChange: onNumberChange,
           });
         case 'select':
-          console.log(`record`, record);
           const onSelectChange = (val) => {
             record.value = val;
           };
@@ -88,11 +88,11 @@ export const columns: BasicColumn[] = [
           });
         case 'time':
           const onTimePickerChange = (val) => {
-            record.value = val;
+            record.value = moment(val).format('HH:mm:ss');
           };
           return h(TimePicker, {
             placeholder: '没有选择时间',
-            value: record.value,
+            value: moment(record.value, 'HH:mm:ss'),
             tip: record.tip,
             onChange: onTimePickerChange,
           });

src/views/general/config/index.vue

@@ -164,9 +164,6 @@
         const data = getTableAction().getDataSource();
         let flag = true;
         data.map((item) => {
-          if (item.type === 'selects' || item.type === 'checkbox') {
-            item.value = item.value.toString();
-          }
           if (item.rule && item.type !== 'array') {
             const rule = item.rule.split(',');
             const res = validateType(rule, item.value);
@@ -179,12 +176,19 @@
         if (flag) {
           const params = {};
           data.map((item) => {
-            if (item.type == 'array') {
+            if (item.type === 'array') {
               params[item.name] = JSON.stringify(item.value);
+              console.log(`item`, item);
+              console.log(`item.value`, item.value);
             } else {
-              params[item.name] = item.value;
+              if (item.type === 'selects' || item.type === 'checkbox') {
+                params[item.name] = item.value.toString();
+              } else {
+                params[item.name] = item.value;
+              }
             }
           });
+          return;
           await editConfigInfo(params).then(() => {
             getTableAction().reload();
             success('修改成功!');