Merge branch 'master' of https://gitcode.net/qq_39019768/test_git

vite-demo/README.md

@@ -5,3 +5,130 @@ This template should help get you started developing with Vue 3 in Vite. The tem
 ## Recommended IDE Setup
 
 - [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+
+
+```
+
+    <ListFilter
+      :config="listFiltersConfig"
+      @onFormSubmit="query"
+      ref="listFilter"
+    >
+      <template #leftButtons>
+        <el-button
+          type="success"
+          size="small"
+          icon="el-icon-plus"
+          v-permission="['add']"
+          @click="add()"
+        >新增
+        </el-button>
+        <el-button
+          type="primary"
+          size="small"
+          icon="el-icon-upload"
+          v-permission="['upload']"
+          @click="importDoc()"
+        >导入
+        </el-button>
+        <el-button
+          type="warning"
+          size="small"
+          icon="el-icon-download"
+          v-permission="['export']"
+          @click="exportExcl"
+        >导出
+        </el-button>
+      </template>
+    </ListFilter>
+ listFiltersConfig: {
+          dataSource: [
+            {
+              inputType: "text",
+              feildName: "vehicleNo",
+              label: "车牌号码",
+              placeholder: "请输入车牌号码"
+            },
+            {
+              inputType: "select",
+              feildName: "leaseStatus",
+              label: "运营状态",
+              placeholder: "请选择运营状态",
+              options: [
+                {value: "0", name: "闲置"},
+                // { value: "4", name: "预备交车" },
+                {value: "1", name: "运营中"}
+              ]
+            },
+            // lsd
+            {
+              inputType: "select",
+              feildName: "vehicleStatus",
+              label: "车辆发布",
+              placeholder: "请选择车辆发布状态",
+              options: [
+                {value: "0", name: "未发布"},
+                {value: "1", name: "正常"},
+                {value: "2", name: "故障",},
+                {value: "3", name: "报废",},
+              ]
+            },
+            {
+              inputType: "select",
+              feildName: "vehicleAnnualTimes",
+              label: "车辆年审",
+              placeholder: "请选择车辆年审状态",
+              options: [
+                {value: "1", name: "已年审"},
+                {value: "2", name: "未年审"},
+                // { value: "3", name: "即将到期" }
+              ]
+            },
+            // TODO options、feildName
+            {
+              inputType: "select",
+              feildName: "vehicleStatus",
+              label: "车辆状态",
+              placeholder: "请选择车辆状态",
+              options: [
+                {value: "0", name: "未发布"},
+                {value: "1", name: "正常"},
+                {value: "2", name: "故障"},
+                {value: "3", name: "报废"}
+              ],
+            },
+            {
+              inputType: "dateRange",
+              feildName: "createdStartTime,createdEndTime",
+              label: "创建时间",
+              styleClass: "autoWidth"
+            },
+            {
+              inputType: "select",
+              feildName: "insuranceStatus",
+              label: "车辆投保",
+              placeholder: "请选择车辆投保状态",
+              options: [
+                {value: "0", name: "未投保"},
+                {value: "1", name: "已投保"},
+              ],
+            },
+          ],
+          buttons: [
+            {
+              inputType: "button",
+              buttonType: "primary",
+              buttonText: "查询",
+              funcType: "submit",
+              permission: ["list"]
+            },
+            {
+              inputType: "button",
+              buttonType: "info",
+              buttonText: "清空",
+              funcType: "clear",
+              permission: ["list"]
+            }
+          ]
+        }
+```
\ No newline at end of file

vite-demo/src/components/CommonList/listFilter.vue

+<template>
+  <section class="listFilters todoUI">
+    <el-card
+      ref="card"
+      id="card"
+    >
+      <div
+        class="wrapper"
+        ref="wrapper"
+      >
+        <el-form
+          :model="ruleForm"
+          inline
+          ref="ruleForm"
+          :label-width="labelWidth"
+          class="demo-ruleForm"
+        >
+          <el-form-item
+            v-for="(item,index) in config.dataSource"
+            :key="`listFilter_${item.feildName}_${index}`"
+            :label="item.label"
+            :prop="`${item.feildName}`"
+            :class="[item.styleClass, item.inputType, { 'flexItem': item.inputType == 'numberRange' }]"
+            :label-width="item.labelEm ? item.labelEm+'em' : '6.25em'"
+          >
+            <el-input
+              clearable
+              v-if="item.inputType == 'text'"
+              v-model="ruleForm[`${item.feildName}`]"
+              @input="(val) => onInputChange(item.feildName, val)"
+              :placeholder="item.placeholder"
+            ></el-input>
+
+            <el-input
+              clearable
+              v-if="item.inputType == 'numberRange'"
+              v-model="ruleForm[`${item.feildName1}`]"
+              @input="(val) => onInputChange(item.feildName1, val)"
+              :placeholder="item.placeholder1"
+            ></el-input>
+            <span
+              v-if="item.inputType == 'numberRange'"
+              style="margin: 0 6px"
+            >-</span>
+            <el-input
+              clearable
+              v-if="item.inputType == 'numberRange'"
+              v-model="ruleForm[`${item.feildName2}`]"
+              @input="(val) => onInputChange(item.feildName2, val)"
+              :placeholder="item.placeholder2"
+            ></el-input>
+
+            <el-select
+              clearable
+              v-if="item.inputType == 'select'"
+              v-model="ruleForm[`${item.feildName}`]"
+              :placeholder="item.placeholder"
+              @input="(val) => onInputChange(item.feildName, val)"
+              :filterable="!!item.filterable"
+            >
+              <el-option
+                v-for="option in item.options"
+                :key="option.value"
+                :label="option[item.labelKey] || option.name"
+                :value="option[item.valueKey] || option.value"
+              ></el-option>
+            </el-select>
+
+            <el-date-picker
+              clearable
+              v-if="item.inputType == 'date'"
+              v-model="ruleForm[`${item.feildName}`]"
+              type="date"
+              :placeholder="item.placeholder"
+              @input="(val) => onInputChange(item.feildName, val)"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              :default-time="['00:00:00', '23:59:59']"
+            ></el-date-picker>
+
+            <el-date-picker
+              clearable
+              v-if="item.inputType == 'dateRange'"
+              v-model="ruleForm[`${item.feildName}`]"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @input="(val) => onInputChange(item.feildName, val, 'dateRange')"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              :picker-options="item.pickerOptions"
+              class="dateRange"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div
+        class="controller"
+        v-if="showToggle"
+      >
+        <el-button
+          type="text"
+          @click="toggle"
+        >
+          <i
+            class="el-icon-caret-bottom"
+            style="color:#409EFF"
+            v-show="flag"
+          ></i>
+          <i
+            class="el-icon-caret-top"
+            style="color:#409EFF"
+            v-show="!flag"
+          ></i>
+          {{ flag ? '点击查看更多':'收起' }}
+        </el-button>
+      </div>
+    </el-card>
+
+    <div class="btnWrap">
+      <div>
+        <slot name="leftButtons"></slot>
+      </div>
+      <div>
+        <template v-for="btn in config.buttons">
+          <template v-if="btn.permission">
+            <el-button
+              size="small"
+              v-permission="[...btn.permission]"
+              :key="btn.buttonText"
+              :icon="getBtnIcon(btn)"
+              :type="btn.buttonType"
+              @click="getBtnFunc(btn)"
+            >{{ btn.buttonText }}</el-button>
+          </template>
+          <template v-else>
+            <el-button
+              size="small"
+              :key="btn.buttonText"
+              :icon="getBtnIcon(btn)"
+              :type="btn.buttonType"
+              @click="getBtnFunc(btn)"
+            >{{ btn.buttonText }}</el-button>
+          </template>
+        </template>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "CommonListFilters",
+  props: {
+    config: Object,
+    labelWidth: String,
+    addFunc: Function,
+    addTxt: String
+  },
+  created () {
+    this.initForm();
+  },
+  mounted () {
+    this.config.dataSource.forEach(async item => {
+      if (item.inputType == "select" && item.asyncFunc) {
+        item.options = await item.asyncFunc();
+      }
+    });
+    const el = document.getElementById('card')
+    if (el.getBoundingClientRect().height > 120) {
+      this.$refs.wrapper.style.height = "60px";
+      this.showToggle = true
+    } else {
+      this.showToggle = false
+    }
+  },
+  data () {
+    return {
+      ruleForm: {},
+      timeArr: [], // 临时管理时间区间组件
+      flag: true,
+      showToggle: true
+    };
+  },
+  methods: {
+    toggle () {
+      if (this.flag) {
+        this.$refs.wrapper.style.height = "auto";
+      } else {
+        this.$refs.wrapper.style.height = "60px";
+      }
+      this.flag = !this.flag;
+    },
+    refreshSelectOptions () {
+      this.config.dataSource.forEach(async item => {
+        if (item.inputType == "select" && item.asyncFunc) {
+          item.options = await item.asyncFunc();
+        }
+      });
+    },
+    initForm () {
+      this.config.dataSource.forEach(item => {
+        if (item.inputType != "dateRange") {
+          this.ruleForm[`${item.feildName}`] = "";
+        } else {
+          if (item.feildName) {
+            this.ruleForm[`${item.feildName}`] = [];
+            let arr = item.feildName.split(',');
+            let key1 = arr[0];
+            let key2 = arr[1];
+            this.ruleForm[key1] = '';
+            this.ruleForm[key2] = '';
+          } else {
+            this.ruleForm[`${item.feildName}`] = [];
+            this.ruleForm.startTime = '';
+            this.ruleForm.endTime = '';
+          }
+        }
+      });
+      // console.log(this.ruleForm);
+    },
+    onInputChange (feildName, val, type) {
+      if (type != "dateRange") {
+        this.ruleForm[`${feildName}`] = val;
+      } else {
+        if (feildName) {
+          let arr = feildName.split(',');
+          let key1 = arr[0];
+          let key2 = arr[1];
+          if (val) {
+            this.ruleForm[key1] = val[0] + ' 00:00:00';
+            this.ruleForm[key2] = val[1] + ' 23:59:59';
+          } else {
+            this.ruleForm[feildName] = [];
+            this.ruleForm[key1] = '';
+            this.ruleForm[key2] = '';
+          }
+        } else {
+          if (val) {
+            this.ruleForm.startTime = val[0] + ' 00:00:00';
+            this.ruleForm.endTime = val[1] + ' 23:59:59';
+          } else {
+            this.ruleForm.startTime = "";
+            this.ruleForm.endTime = "";
+          }
+        }
+
+      }
+      this.$forceUpdate();
+    },
+    submitForm (callBack) {
+      let data = {};
+      for (let key in this.ruleForm) {
+        if (
+          this.ruleForm[key] != undefined &&
+          this.ruleForm[key] != null &&
+          this.ruleForm[key] != ""
+        ) {
+          data[key] = this.ruleForm[key];
+        }
+      }
+      this.$emit("onFormSubmit");
+    },
+    setQuery (field, val) {
+      console.log(field, val)
+      if (val != undefined) {
+        this.ruleForm[field] = val;
+      } else {
+        this.ruleForm[field] = '';
+      }
+      this.$forceUpdate();
+    },
+    // 可从父组件调用此方法返回当前输入的查询条件
+    getQuery () {
+      let data = {};
+      for (let key in this.ruleForm) {
+        if (
+          this.ruleForm[key] != undefined &&
+          this.ruleForm[key] != null &&
+          this.ruleForm[key] != ""
+        ) {
+          data[key] = this.ruleForm[key];
+        }
+      }
+      return data;
+    },
+    resetForm () {
+      this.$nextTick(() => {
+        this.initForm();
+        this.$refs["ruleForm"].resetFields();
+        let data = {};
+        for (let key in this.ruleForm) {
+          this.ruleForm[key] = '';
+        }
+        this.$forceUpdate();
+        this.$emit("onFormSubmit", 1);
+      });
+    },
+    getBtnFunc (btn) {
+      if (btn.funcType == "submit") {
+        this.submitForm();
+      } else if (btn.funcType == "clear") {
+        return this.resetForm();
+      } else {
+        if (btn.function) {
+          return btn.function();
+        } else {
+          return function() { };
+        }
+      }
+    },
+    getBtnIcon (btn) {
+      if (btn.funcType == "submit") {
+        return "el-icon-search";
+      } else if (btn.funcType == "clear") {
+        return "el-icon-refresh-left";
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.listFilters {
+  margin-bottom: 20px;
+  .wrapper {
+    overflow: hidden;
+  }
+  .el-form--inline .el-form-item__label {
+    width: 6em;
+  }
+  .flexItem {
+    label {
+      float: left;
+    }
+    .el-form-item__content {
+      display: flex;
+      width: auto !important;
+    }
+  }
+  .el-form-item__content {
+    width: 180px;
+  }
+  .dateRange {
+    .el-form-item__content {
+      width: auto;
+    }
+    .el-range-editor.el-input__inner {
+      width: 300px !important;
+    }
+  }
+  .el-input__inner {
+    height: 32px;
+  }
+  .el-range-editor.el-input__inner {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .btnWrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+    padding: 0;
+  }
+  .controller {
+    padding-right: 30px;
+    text-align: right;
+  }
+  .el-input--suffix .el-input__inner {
+    padding-right: 15px;
+  }
+  .el-form-item__label {
+    padding: 0;
+    margin-right: 10px;
+  }
+  .el-card__body {
+    padding: 20px 10px;
+  }
+}
+</style>

vite-demo/src/components/CommonList/table.vue

+<template>
+  <div class="todoUI">
+    <el-table :data="dataSource" border style="width: 100%">
+        <el-table-column type="index" label="序号" width="50" align="center" v-if="showIndex" />
+        <el-table-column v-for="column in columns" :key="column.feildName" :property="column.feildName" :label="column.label" :width="column.width" align="left" header-align="center">
+          <template slot-scope="scope">
+            <div v-if="column.type == 'picture'" style="width: 100px;margin: 0 auto;">
+              <el-image v-if="scope.row[`${column.feildName}`]" :src="scope.row[`${column.feildName}`]" :preview-src-list="[scope.row[`${column.feildName}`]]"></el-image>
+            </div>
+            <div v-if="!column.type">
+              <span :style="{ 'color': column.color ? column.color(scope.row[`${column.feildName}`]) : '' }" v-if="!column.formatter">{{ scope.row[`${column.feildName}`] }}</span>
+              <span :style="{ 'color': column.color ? column.color(scope.row[`${column.feildName}`]) : '' }"  v-if="column.formatter">{{  column.formatter(scope.row[`${column.feildName}`]) }}</span>
+              <span :style="{ 'color': column.color ? column.color(scope.row[`${column.feildName}`]) : '' }"  v-if="column.rowFormatter">{{  column.rowFormatter(scope.row) }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="180" fixed='right' v-if="actions && actions.length">
+          <template slot-scope="scope">
+            <span class="actionItemWrap" v-for="btn in actions" v-show="btn.show ? btn.show(scope.row) : true" :key="btn.text">
+              <el-button v-if="!btn.needConfirm" type="text" :disabled="btn.disabledCondition ? btn.disabledCondition(scope.row) : false" :style="{'color': btn.color ? btn.color : ''}"
+              @click="action(scope.row, btn.handler)">{{ btn.text }}</el-button>
+              <el-popconfirm
+                title="确定要执行该操作吗？"
+                @confirm="action(scope.row, btn.handler)"
+                v-else
+              >
+                <el-button slot="reference" type="text">{{ btn.text }}</el-button>
+              </el-popconfirm>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyTable',
+  props: {
+    columns: Array,
+    actions: Array,
+    fetchList: Function,
+    query: Object,
+    dataSourceStr: String,
+    showIndex: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      page: 1,
+      pageSize: 20,
+      total: 0,
+      dataSource: []
+    }
+  },
+  watch: {
+    dataSourceStr(newVal, oldVal) {
+      let rawData = JSON.parse(newVal);
+      this.dataSource = rawData.result;
+      this.total = Number(rawData.total);
+      this.page = rawData.pageNum;
+    },
+  },
+  methods: {
+    action(data, callback) {
+      callback(data);
+    },
+    handleSizeChange(size) {
+      this.pageSize = size;
+      this.$emit('onSizeChange', size);
+    },
+    handleCurrentChange(page) {
+      this.page = page;
+      this.$emit('onPageChange', page);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.actionItemWrap {
+  margin: 0 2px;
+}
+</style>
\ No newline at end of file