lw-cdp-ui 1.1.0 → 1.1.2

package/dist/components/lwCronSelect/index.vue

@@ -0,0 +1,215 @@
+<template>
+  <el-input v-model="showInput"
+            placeholder="CRON">
+
+    <template #append>
+      <el-popover placement="top"
+                  :width="380"
+                  :visible="visible"
+                  trigger="click">
+        <template #reference>
+          <el-button @click="visible = true">选择</el-button>
+        </template>
+        <div class="select-model">
+          <el-select v-model="setData.curType"
+                     placeholder="选择类型"
+                     @change="changeInt"
+                     style="margin-right: 5px;min-width: 80px;width: 80px">
+            <el-option label="每天"
+                       :value="3" />
+            <el-option label="每月"
+                       :value="4" />
+            <el-option label="每周"
+                       :value="5" />
+          </el-select>
+
+          <el-select v-if="setData.curType === 4"
+                     v-model="setData.day"
+                     multiple
+                     allow-clear
+                     placeholder="日期"
+                     @change="changeDay"
+                     :max-tag-count="1"
+                     style="margin-right: 5px; min-width: 120px">
+            <el-option label="最后一天"
+                       value="L" />
+            <el-option v-for="item in 31"
+                       :key="item"
+                       :label="item"
+                       :value="item"
+                       :disabled="setData.day.indexOf('L') !== -1" />
+          </el-select>
+
+          <el-select v-if="setData.curType === 5"
+                     v-model="setData.weeks"
+                     multiple
+                     allow-clear
+                     placeholder="星期"
+                     @change="changeWeeks"
+                     :max-tag-count="1"
+                     style="margin-right: 5px; min-width: 120px">
+            <el-option label="周日"
+                       value="1"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周一"
+                       value="2"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周二"
+                       value="3"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周三"
+                       value="4"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周四"
+                       value="5"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周五"
+                       value="6"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周六"
+                       value="7"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+          </el-select>
+
+          <el-time-picker v-model="setData.timeData"
+                          placeholder="时分秒"
+                          value-format="HH:mm:ss"
+                          style="min-width: 100px" />
+
+        </div>
+        <div style="margin-top: 10px; text-align: right;">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary"
+                     @click="changeOk">确定</el-button>
+        </div>
+      </el-popover>
+    </template>
+  </el-input>
+</template>
+
+<script>
+/**
+ *  秒 分  时 日 月 周
+ *  *
+ */
+import { defineComponent, ref, computed } from 'vue';
+
+export default defineComponent({
+  name: 'lwCronSelect',
+  props: {
+    disabled: Boolean,
+    modelValue: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props, { emit }) {
+    const dataList = computed(() => {
+      return props.modelValue ? props.modelValue.split(' ') : ['*', '*', '*', '*', '*', '?']
+    })
+    const showInput = ref(props.modelValue)
+    const visible = ref(false)
+
+    const changeInt = (val) => {
+      switch (val) {
+        case 3:
+          dataList.value[3] = '*'
+          dataList.value[4] = '*'
+          dataList.value[5] = '*'
+          break
+        case 4:
+          dataList.value[4] = '*'
+          dataList.value[5] = '*'
+          break
+        case 5:
+          dataList.value[5] = '?'
+          break
+      }
+      setData.value.day = []
+      setData.value.weeks = []
+      setData.value.month = []
+      setData.value.timeData = ''
+    }
+
+    const setData = ref({
+      curType: dataList.value[4] !== '*' ? 4 : dataList.value[5] === '?' ? 3 : 5,
+      day: dataList.value[3] === '*' ? [] : dataList.value[3]?.split(','),
+      month: dataList.value[4] === '*' ? [] : dataList.value[4]?.split(','),
+      weeks: dataList.value[5] === '?' ? [] : dataList.value[5]?.split(','),
+      timeData: dataList.value[0] === '*' ? '' : `${dataList.value[2]}:${dataList.value[1]}:${dataList.value[0]}`
+    })
+
+
+
+    // 选择日期
+    const changeDay = (val) => {
+      if (val.indexOf('L') !== -1) {
+        setData.value.day = ['L']
+      }
+    }
+    // 选择日期
+    const changeWeeks = (val) => {
+      if (val.indexOf('?') !== -1) {
+        setData.value.weeks = ['?']
+      }
+    }
+
+    const changeCron = () => {
+      emit('update:modelValue', showInput.value)
+    }
+
+    // 确定选择
+    const changeOk = () => {
+      console.log(setData.value.timeData)
+      const time = setData.value.timeData ? setData.value.timeData.split(':') : ['*', '*', '*']
+      dataList.value[0] = time[2] === "*" ? time[2] : parseInt(time[2], 10).toString()
+      dataList.value[1] = time[1] === "*" ? time[1] : parseInt(time[1], 10).toString()
+      dataList.value[2] = time[0] === "*" ? time[0] : parseInt(time[0], 10).toString()
+
+      dataList.value[3] = setData.value.day.length > 0 ? setData.value.day.toString() : '*'
+      dataList.value[4] = setData.value.month.length > 0 ? setData.value.month.toString() : '*'
+      dataList.value[5] = setData.value.weeks.length > 0 ? setData.value.weeks.toString() : '?'
+
+      if (dataList.value[3] === '*' && dataList.value[5] !== '?') {
+        dataList.value[3] = '?'
+      }
+
+      showInput.value = `${dataList.value[0]} ${dataList.value[1]} ${dataList.value[2]} ${dataList.value[3]} ${dataList.value[4]} ${dataList.value[5]}`
+
+      emit('update:modelValue', showInput.value)
+      visible.value = false
+    }
+
+    return {
+      setData,
+      showInput,
+      visible,
+      changeInt,
+      changeOk,
+      changeCron,
+      changeDay,
+      changeWeeks
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.CronSelect {
+  margin: 5px 0;
+  width: 100%;
+}
+
+.select-model {
+  display: flex;
+  width: 100%;
+
+  .item-select {
+    margin-right: 5px;
+  }
+}
+
+:deep(.arco-popconfirm-icon) {
+  display: none;
+}
+</style>

package/dist/components/lwForm/index.vue

@@ -65,7 +65,7 @@
             </template>
             <!-- upload -->
             <template v-else-if="item.component=='upload'">
-              <el-col v-for="(_item, _index) in item.options.items"
+              <template v-for="(_item, _index) in item.options.items"
                       :key="_index">
                 <template v-if="item.name">
                   <el-form-item :prop="_item.name">
@@ -80,7 +80,7 @@
                   </el-form-item>
                 </template>
 
-              </el-col>
+              </template>
             </template>
             <!-- checkbox -->
             <template v-else-if="item.component=='checkbox'">
@@ -176,6 +176,7 @@
                                 :shortcuts="item.options.shortcuts"
                                 :disabled-date="item.options.disabledDate"
                                 :default-time="item.options.defaultTime"
+                                :disabled="item.options.disabled"
                                 :value-format="item.options.valueFormat"
                                 :placeholder="item.options.placeholder || '请选择'"></el-date-picker>
               </template>
@@ -188,6 +189,7 @@
                                 :shortcuts="item.options.shortcuts"
                                 :disabled-date="item.options.disabledDate"
                                 :default-time="item.options.defaultTime"
+                                :disabled="item.options.disabled"
                                 :value-format="item.options.valueFormat"
                                 :placeholder="item.options.placeholder || '请选择'"></el-date-picker>
               </template>
@@ -197,11 +199,12 @@
             <template v-else-if="item.component=='number'">
               <template v-if="item?.options?.name">
                 <el-input-number v-model="form[item.name][item.options.name]"
+                                 :disabled="item.options.disabled"
                                  v-bind="{
-                                  min: item?.options?.min !== undefined ? item.options.min : null,
-                                  max: item?.options?.max !== undefined ? item.options.max : null,
-                                  step: item?.options?.step !== undefined ? item.options.step : 1,
-                                  precision: item?.options?.precision !== undefined ? item.options.precision : null,
+                                  min: item?.options?.min,
+                                  max: item?.options?.max,
+                                  step: item?.options?.step|| 1,
+                                  precision: item?.options?.precision,
                                   placeholder: item?.options?.placeholder || ''
                                 }"
                                  controls-position="right">
@@ -213,11 +216,12 @@
               </template>
               <template v-else>
                 <el-input-number v-model="form[item.name]"
+                                 :disabled="item.options.disabled"
                                  v-bind="{
-                                  min: item?.options?.min !== undefined ? item.options.min : null,
-                                  max: item?.options?.max !== undefined ? item.options.max : null,
-                                  step: item?.options?.step !== undefined ? item.options.step : 1,
-                                  precision: item?.options?.precision !== undefined ? item.options.precision : null,
+                                  min: item?.options?.min,
+                                  max: item?.options?.max,
+                                  step: item?.options?.step|| 1,
+                                  precision: item?.options?.precision,
                                   placeholder: item?.options?.placeholder || ''
                                 }"
                                  controls-position="right">

package/dist/components/lwFormView/index.vue

@@ -1,22 +1,25 @@
 <template>
   <el-skeleton v-if="renderLoading || Object.keys(form).length==0"
                animated />
-  <el-descriptions v-else
-                   :column="config.column || 3"
-                   :size="config.size">
+  <el-row :gutter="20"
+          v-else>
     <template v-for="(item, index) in config.formItems">
       <template v-if="!hideHandle(item)">
         <template v-if="item.component == 'divider'">
-          <el-descriptions-item :span="item.span || 24">
-            <template #label>
+          <el-col :span="item.span || 24"
+                  :class="{topPadding: index !== 0}">
+            <div class="top-title-body">
               <span class="title-name">{{ item.label }}</span>
-            </template>
-          </el-descriptions-item>
+              <slot :name="item.options?.component"></slot>
+            </div>
+          </el-col>
         </template>
-        <el-descriptions-item v-else
-                              :span="item.span/(24/(config.column || 3))">
-          <template #label>
+        <el-col v-else
+                :span="item.span">
+          <div class="span-item"
+               :class="[config.labelPosition]">
             <span v-if="item.label"
+                  :style="{minWidth: config.labelWidth}"
                   class="title-item">
               {{ item.label }}
               <el-tooltip v-if="item.tips"
@@ -24,163 +27,166 @@
                 <el-icon><el-icon-question-filled /></el-icon>
               </el-tooltip>:
             </span>
-          </template>
-          <!-- input -->
-          <template v-if="item.component=='input' || item.component=='number'">
-            <template v-if="item?.options?.name">
-              <textToPassword v-model="form[item.name][item.options.name]"
-                              :password="item?.options?.password" />
+            <!-- input -->
+            <template
+                      v-if="item.component=='input' || item.component=='number'">
+              <template v-if="item?.options?.name">
+                <textToPassword v-model="form[item.name][item.options.name]"
+                                :width="config.labelWidth"
+                                :password="item?.options?.password" />
+              </template>
+              <template v-else>
+                <textToPassword v-model="form[item.name]"
+                                :password="item?.options?.password" />
+              </template>
             </template>
-            <template v-else>
-              <textToPassword v-model="form[item.name]"
-                              :password="item?.options?.password" />
+            <!-- upload -->
+            <template v-else-if="item.component=='upload'">
+              <el-col v-for="(_item, _index) in item.options.items"
+                      :key="_index">
+                <template v-if="item.name">
+                  <el-image style="width: 100px; height: 100px"
+                            :src="form[item.name][_item.name]"
+                            :fit="contain" />
+                </template>
+                <template v-else>
+                  <el-image style="width: 100px; height: 100px"
+                            :src="form[_item.name]"
+                            :fit="contain" />
+                </template>
+
+              </el-col>
             </template>
-          </template>
-          <!-- upload -->
-          <template v-else-if="item.component=='upload'">
-            <el-col v-for="(_item, _index) in item.options.items"
-                    :key="_index">
+            <!-- checkbox -->
+            <template v-else-if="item.component=='checkbox'">
               <template v-if="item.name">
-                <el-image style="width: 100px; height: 100px"
-                          :src="form[item.name][_item.name]"
-                          :fit="contain" />
+                {{ form[item.name][_item.name] }}
               </template>
               <template v-else>
-                <el-image style="width: 100px; height: 100px"
-                          :src="form[_item.name]"
-                          :fit="contain" />
+                {{ form[_item.name] }}
               </template>
-
-            </el-col>
-          </template>
-          <!-- checkbox -->
-          <template v-else-if="item.component=='checkbox'">
-            <template v-if="item.name">
-              {{ form[item.name][_item.name] }}
             </template>
-            <template v-else>
-              {{ form[_item.name] }}
-            </template>
-          </template>
-          <!-- checkboxGroup -->
-          <template v-else-if="item.component=='checkboxGroup'">
-            {{ form[item.name] }}
-          </template>
-          <!-- switch -->
-          <template v-else-if="item.component=='switch'">
-            <template v-if="item?.options?.name">
-              {{ form[item.name][item.options.name] ? item.options.true || '是' : item.options.false || '否' }}
-            </template>
-            <template v-else>
-              {{ form[item.name] ? item.options.true || '是' : item.options.false || '否' }}
+            <!-- checkboxGroup -->
+            <template v-else-if="item.component=='checkboxGroup'">
+              {{ form[item.name] }}
             </template>
-          </template>
-          <!-- select -->
-          <template
-                    v-else-if="item.component=='select' || item.component=='radio'">
-            <template v-if="item?.options?.name">
-              {{getKeyToLabel(form[item.name][item.options.name], item.options.items)}}
-            </template>
-            <template v-else>
-              {{getKeyToLabel(form[item.name], item.options.items)}}
+            <!-- switch -->
+            <template v-else-if="item.component=='switch'">
+              <template v-if="item?.options?.name">
+                {{ form[item.name][item.options.name] ? item.options.true || '是' : item.options.false || '否' }}
+              </template>
+              <template v-else>
+                {{ form[item.name] ? item.options.true || '是' : item.options.false || '否' }}
+              </template>
             </template>
-          </template>
-          <!-- cascader -->
-          <template v-else-if="item.component=='cascader'">
-            <template v-if="item?.options?.name">
-              <el-cascader v-model="form[item.name][item.options.name]"
-                           :options="item.options.items"
-                           clearable></el-cascader>
+            <!-- select -->
+            <template
+                      v-else-if="item.component=='select' || item.component=='radio'">
+              <template v-if="item?.options?.name">
+                {{getKeyToLabel(form[item.name][item.options.name], item.options.items)}}
+              </template>
+              <template v-else>
+                {{getKeyToLabel(form[item.name], item.options.items)}}
+              </template>
             </template>
-            <template v-else>
-              <el-cascader v-model="form[item.name]"
-                           :options="item.options.items"
-                           clearable></el-cascader>
+            <!-- cascader -->
+            <template v-else-if="item.component=='cascader'">
+              <template v-if="item?.options?.name">
+                <el-cascader v-model="form[item.name][item.options.name]"
+                             :options="item.options.items"
+                             clearable></el-cascader>
+              </template>
+              <template v-else>
+                <el-cascader v-model="form[item.name]"
+                             :options="item.options.items"
+                             clearable></el-cascader>
+              </template>
             </template>
-          </template>
-          <!-- date -->
-          <template v-else-if="item.component=='date'">
-            <template v-if="item?.options?.name">
-              {{ dayjs(form[item.name][item.options.name]).format(item.options.valueFormat || 'YYYY-MM-DD HH:mm:ss') }}
+            <!-- date -->
+            <template v-else-if="item.component=='date'">
+              <template v-if="item?.options?.name">
+                {{ dayjs(form[item.name][item.options.name]).format(item.options.valueFormat || 'YYYY-MM-DD HH:mm:ss') }}
 
-            </template>
-            <template v-else>
-              {{ dayjs(form[item.name]).format(item.options.valueFormat || 'YYYY-MM-DD HH:mm:ss') }}
-            </template>
+              </template>
+              <template v-else>
+                {{ dayjs(form[item.name]).format(item.options.valueFormat || 'YYYY-MM-DD HH:mm:ss') }}
+              </template>
 
-          </template>
-          <!-- color -->
-          <template v-else-if="item.component=='color'">
-            <template v-if="item?.options?.name">
-              <el-color-picker disabled
-                               v-model="form[item.name][item.options.name]" />
-            </template>
-            <template v-else>
-              <el-color-picker disabled
-                               v-model="form[item.name]" />
             </template>
+            <!-- color -->
+            <template v-else-if="item.component=='color'">
+              <template v-if="item?.options?.name">
+                <el-color-picker disabled
+                                 v-model="form[item.name][item.options.name]" />
+              </template>
+              <template v-else>
+                <el-color-picker disabled
+                                 v-model="form[item.name]" />
+              </template>
 
-          </template>
-          <!-- rate -->
-          <template v-else-if="item.component=='rate'">
-            <template v-if="item?.options?.name">
-              <el-rate disabled
-                       v-model="form[item.name][item.options.name]"></el-rate>
-            </template>
-            <template v-else>
-              <el-rate disabled
-                       v-model="form[item.name]"></el-rate>
             </template>
-          </template>
-          <!-- slider -->
-          <template v-else-if="item.component=='slider'">
-            <template v-if="item?.options?.name">
-              <el-slider disabled
-                         v-model="form[item.name][item.options.name]"
-                         :marks="item.options.marks"></el-slider>
-            </template>
-            <template v-else>
-              <el-slider disabled
-                         v-model="form[item.name]"
-                         :marks="item.options.marks"></el-slider>
+            <!-- rate -->
+            <template v-else-if="item.component=='rate'">
+              <template v-if="item?.options?.name">
+                <el-rate disabled
+                         v-model="form[item.name][item.options.name]"></el-rate>
+              </template>
+              <template v-else>
+                <el-rate disabled
+                         v-model="form[item.name]"></el-rate>
+              </template>
             </template>
-
-          </template>
-
-          <!-- tags -->
-          <template v-else-if="item.component=='tags'">
-            <div class="tags-list">
+            <!-- slider -->
+            <template v-else-if="item.component=='slider'">
               <template v-if="item?.options?.name">
-                <el-tag v-for="tag in form[item.name][item?.options?.name]"
-                        :key="tag">
-                  {{ tag }}
-                </el-tag>
-
+                <el-slider disabled
+                           v-model="form[item.name][item.options.name]"
+                           :marks="item.options.marks"></el-slider>
               </template>
               <template v-else>
-                <el-tag v-for="tag in form[item.name]"
-                        :key="tag">
-                  {{ tag }}
-                </el-tag>
+                <el-slider disabled
+                           v-model="form[item.name]"
+                           :marks="item.options.marks"></el-slider>
               </template>
 
-            </div>
-          </template>
+            </template>
+
+            <!-- tags -->
+            <template v-else-if="item.component=='tags'">
+              <div class="tags-list">
+                <template v-if="item?.options?.name">
+                  <el-tag v-for="tag in form[item.name][item?.options?.name]"
+                          :key="tag">
+                    {{ tag }}
+                  </el-tag>
+
+                </template>
+                <template v-else>
+                  <el-tag v-for="tag in form[item.name]"
+                          :key="tag">
+                    {{ tag }}
+                  </el-tag>
+                </template>
 
-          <!-- 没有组件是component值 就是插槽名称 -->
-          <template v-else>
-            <slot :name="item.component">
-              <el-tag type="danger">[{{item.component}}]
-                没有这个默认组件也未自定义插槽内容</el-tag>
-            </slot>
-          </template>
-          <div v-if="item.message"
-               class="el-form-item-msg">{{item.message}}</div>
-        </el-descriptions-item>
+              </div>
+            </template>
+
+            <!-- 没有组件是component值 就是插槽名称 -->
+            <template v-else>
+              <slot :name="item.component">
+                <el-tag type="danger">
+                  [{{item.component}}]
+                  没有这个默认组件也未自定义插槽内容</el-tag>
+              </slot>
+            </template>
+            <div v-if="item.message"
+                 class="el-form-item-msg">{{item.message}}</div>
+          </div>
+        </el-col>
       </template>
     </template>
 
-  </el-descriptions>
+  </el-row>
 </template>
 
 <script>
@@ -330,20 +336,40 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.button-new-tag {
-  margin-left: 10px;
+.topPadding {
+  margin-top: 20px;
 }
-.w-20 {
-  width: 100px;
-  margin-left: 10px;
+.top-title-body {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  .title-name {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
 }
-.title-name {
-  font-size: 18px;
-  font-weight: bold;
+
+.span-item {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 10px;
+  flex-wrap: wrap;
   margin-bottom: 10px;
+  line-height: 24px;
+  font-size: 14px;
+  width: 100%;
+  &.top {
+    flex-direction: column;
+  }
+  &.right {
+    .title-item {
+      text-align: right;
+    }
+  }
+  .title-item {
+    color: #7c7c7c;
+    display: inline-block;
+  }
 }
-.title-item {
-  color: #7c7c7c;
-}
-
 </style>