meixioacomponent 0.1.0

package/packages/components/proForm/proForm/pro_form_item.vue

@@ -0,0 +1,459 @@
+<template>
+  <div
+    :class="{
+      'form-item-wrap': true,
+      disabled: config.disabled,
+    }"
+  >
+    <div class="item-content" v-if="!isEdit">
+      <span
+        v-if="!spContentType"
+        class="content-value"
+        @click="handleClick('content')"
+        :class="[`${config.click ? 'click' : config.color}`]"
+        >{{ contentValue }}</span
+      >
+
+      <!-- 单选框 -->
+      <el-radio-group
+        v-model="module"
+        disabled
+        size="mini"
+        v-if="config.type == 'radio'"
+      >
+        <el-radio-button
+          :key="index"
+          :label="item.value"
+          v-for="(item, index) in config.list"
+          >{{ item.label }}</el-radio-button
+        >
+      </el-radio-group>
+
+      <!-- checkbox多选框 -->
+      <el-checkbox-group
+        :min="checkMin"
+        :max="checkMax"
+        v-model="module"
+        style="width: 100%"
+        v-else-if="config.type == 'checkbox'"
+      >
+        <el-checkbox
+          v-for="(item, index) in config.list"
+          :key="index"
+          :label="item"
+          disabled
+          >{{ item }}</el-checkbox
+        >
+      </el-checkbox-group>
+      <!-- textarea -->
+      <el-input
+        autosize
+        disabled
+        type="textarea"
+        v-model="module"
+        v-if="config.type == 'textarea'"
+      >
+      </el-input>
+
+      <base-icon
+        :size="`s`"
+        :event="true"
+        :title="`修改`"
+        v-show="!isEdit && !config.disabled"
+        :name="`icon-edit`"
+        @iconClick="handleClick('edit')"
+      ></base-icon>
+    </div>
+    <div class="item-handle-wrap" :class="[`${config.type}`]" v-else>
+      <!-- input输入框 -->
+      <el-input
+        v-if="config.type == 'input'"
+        size="small"
+        v-model="module"
+        style="width: 100%; height: 100%"
+      >
+      </el-input>
+      <!-- 数字类型无小数 -->
+      <el-input-number
+        size="small"
+        v-else-if="config.type == 'number'"
+        v-model.number="module"
+        :controls="false"
+      ></el-input-number>
+      <!--数字类型两位小数  -->
+      <el-input-number
+        size="small"
+        :precision="2"
+        v-model.number="module"
+        :controls="false"
+        v-else-if="config.type == 'number2'"
+      ></el-input-number>
+      <!-- select选择器 -->
+      <el-select
+        size="small"
+        v-model="module"
+        placeholder="请选择"
+        :multiple="multiple"
+        :loading="selectLoading"
+        @visible-change="visibleChange"
+        style="width: 100%; height: 100%"
+        v-else-if="config.type == 'select'"
+        :multipleLimit="config.multipleLimit"
+      >
+        <el-option
+          v-for="item in selectData"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <!-- 时间选择器 -->
+      <el-date-picker
+        type="date"
+        align="right"
+        v-model="module"
+        size="small"
+        placeholder="选择日期"
+        value-format="timestamp"
+        :prefix-icon="`el-icon-time`"
+        style="width: 100%; height: 100%"
+        v-else-if="config.type == 'time'"
+        :picker-options="config.pickerOptions"
+      >
+      </el-date-picker>
+      <!-- 单选框 -->
+      <el-radio-group
+        v-model="module"
+        size="mini"
+        v-else-if="config.type == 'radio'"
+      >
+        <el-radio-button
+          :key="index"
+          :label="item.value"
+          v-for="(item, index) in config.list"
+          >{{ item.label }}</el-radio-button
+        >
+      </el-radio-group>
+      <!-- 选择器 -->
+      <el-checkbox-group
+        :min="checkMin"
+        :max="checkMax"
+        v-model="module"
+        style="width: 100%"
+        v-else-if="config.type == 'checkbox'"
+      >
+        <el-checkbox
+          :key="index"
+          :label="item"
+          v-for="(item, index) in config.list"
+          >{{ item }}</el-checkbox
+        >
+      </el-checkbox-group>
+      <!-- 文本输入框 -->
+      <el-input
+        autosize
+        type="textarea"
+        v-model="module"
+        v-if="config.type == 'textarea'"
+      >
+      </el-input>
+      <!-- 插槽 -->
+      <slot name="template" v-else-if="config.type == 'template'"></slot>
+    </div>
+    <!-- 确定的按钮 -->
+    <div class="bottom-handle-wrap" v-show="isEdit && !form">
+      <el-button
+        type="info"
+        size="small"
+        icon="el-icon-check"
+        class="dropdown-button"
+        @click="handleClick('confirm')"
+        plain
+      ></el-button>
+      <el-button
+        type="info"
+        size="small"
+        icon="el-icon-close"
+        class="dropdown-button"
+        @click="handleClick('edit')"
+        plain
+      ></el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { FilterTime } from "../../../utils/utils";
+//
+import UseSelectStore from "../../../config/use/UseSelectStore";
+export default {
+  data() {
+    return {
+      isEdit: false,
+      oldValue: null,
+    };
+  },
+  created() {
+    this.init();
+  },
+  props: {
+    config: {
+      type: Object,
+    },
+
+    form: {
+      type: Boolean,
+      default: false,
+    },
+
+    value: {},
+  },
+
+  computed: {
+    multiple() {
+      return this.$props.config.multipleLimit ? true : false;
+    },
+    selectLoading() {
+      return this.selectStore.getLoading();
+    },
+    selectStore() {
+      // console.log()
+      return UseSelectStore.getStore(this.$props.config.useStore);
+    },
+
+    selectData() {
+      return this.selectStore.getData();
+    },
+
+    spContentType() {
+      let configType = this.$props.config.type;
+      if (
+        configType == "radio" ||
+        configType == "label" ||
+        configType == "checkbox" ||
+        configType == "textarea"
+      ) {
+        return true;
+      }
+      return false;
+    },
+    contentValue() {
+      let type = this.$props.config.type;
+      switch (type) {
+        case "input":
+        case "textarea":
+          return this.module;
+
+        case "select":
+          let list = this.selectData;
+          if (list.length > 0) {
+            if (!this.multiple) {
+              let index = list.findIndex((item) => {
+                return item.value == this.module;
+              });
+              return list[index].label;
+            } else {
+              let text = "";
+              this.module.forEach((item) => {
+                let index = list.findIndex((citem) => {
+                  return citem.value == item;
+                });
+
+                text += text ? ` / ${list[index].label}` : list[index].label;
+              });
+              return text;
+            }
+          } else {
+            this.loadSelectData();
+            return this.$props.config.value;
+          }
+
+        case "time":
+          let config = this.$props.config;
+          let format = config.format ? config.format : "YYYY-MM-DD";
+          return FilterTime(this.module, format);
+        default:
+          return this.module;
+      }
+    },
+    type() {
+      return this.$props.config.type;
+    },
+
+    checkMax() {
+      let max = this.$props.config.max;
+      return max ? max : this.$props.config.list.length;
+    },
+
+    checkMin() {
+      let min = this.$props.config.min;
+      return min < 0 || min == undefined || min == null ? 0 : min;
+    },
+    module: {
+      get() {
+        let type = this.$props.config.type;
+        if (type == "select") {
+          if (this.selectData.length <= 0) {
+            this.loadSelectData();
+          }
+        }
+
+        return this.$props.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+  methods: {
+    init() {
+      if (this.$props.form) {
+        this.isEdit = true;
+      }
+    },
+    handleContent() {
+      if (this.$props.config.click) {
+        this.$props.config.click(this.$props.config);
+      }
+    },
+    handleClick(type) {
+      switch (type) {
+        case "edit":
+          this.isEdit = !this.isEdit;
+          if (this.isEdit) {
+            this.oldValue = this.value;
+          } else {
+            this.module = this.oldValue;
+            this.oldValue = null;
+          }
+          break;
+        case "content":
+          this.handleContent();
+          break;
+        case "confirm":
+          this.$emit("formItemConfirm", {
+            this: this,
+            config: this.$props.config,
+          });
+          break;
+        default:
+          break;
+      }
+    },
+    handleConfirm() {
+      this.isEdit = false;
+    },
+    loadSelectData() {
+      this.selectStore.loadData();
+    },
+    visibleChange(visible) {
+      if (!visible) return;
+      if (this.selectData.length > 0) return;
+      this.loadSelectData();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.form-item-wrap {
+  width: 100%;
+  height: auto;
+  position: relative;
+  border-radius: calc(var(--radius) * 2);
+  .item-content {
+    display: flex;
+    min-height: 32px;
+    align-items: center;
+    flex-flow: row nowrap;
+    box-sizing: border-box;
+    border-radius: inherit;
+    background: var(--color-gray-s);
+    justify-content: space-between;
+    border: 2px solid var(--font-color-ds);
+    padding: var(--padding-1) var(--padding-3);
+
+    &:hover {
+      /deep/ .base-icon-wrap {
+        visibility: visible;
+      }
+    }
+    /deep/ .base-icon-wrap {
+      width: 24px;
+      height: 24px;
+      visibility: hidden;
+    }
+    .content-value {
+      display: inline-block;
+      color: var(--font-color-d);
+      font-size: var(--font-size-s);
+      font-weight: var(--font-weight-g);
+    }
+    .warn {
+      color: var(--color-warn);
+    }
+    .error {
+      color: var(--color-error);
+    }
+    .success {
+      color: var(--color-success);
+    }
+    .click {
+      cursor: pointer;
+      font-weight: var(--font-weight-kg);
+      color: var(--color-primary) !important;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+  .item-handle-wrap {
+    width: 100%;
+    min-height: 32px;
+    border-radius: inherit;
+    /deep/ .el-input__inner {
+      font-weight: var(--font-weight-kg) !important;
+    }
+    /deep/ .el-input__prefix {
+      i {
+        font-weight: var(--font-weight-kg) !important;
+      }
+    }
+  }
+
+  .radio,
+  .checkbox,
+  .template,
+  .textarea {
+    box-sizing: border-box;
+    background: var(--hover-gray);
+    border: 2px solid var(--color-border);
+    padding: var(--padding-1) var(--padding-3);
+  }
+
+  .bottom-handle-wrap {
+    z-index: 2;
+    right: 0px;
+    width: auto;
+    height: auto;
+    display: flex;
+    bottom: -10px;
+    position: absolute;
+    align-items: center;
+    flex-flow: row nowrap;
+    transform: translateY(100%);
+    justify-content: space-between;
+    .dropdown-button {
+      box-shadow: var(--shadow);
+    }
+  }
+}
+.disabled {
+  cursor: not-allowed !important;
+
+  .content-value {
+    color: var(--font-color-ds) !important;
+  }
+}
+</style>

package/packages/components/proForm/proFormWrap/index.js

@@ -0,0 +1,6 @@
+import proFormWrap from "./pro_form_wrap.vue";
+
+proFormWrap.install = function (Vue) {
+  Vue.component(proFormWrap.name, proFormWrap);
+};
+export default proFormWrap;

package/packages/components/proForm/proFormWrap/pro_form_wrap.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="pro-form-wrap">
+    <baseSectionVue :headerText="formTitle" v-model="sectionOpen">
+      <base-icon :name="iconClass" :size="`l`" slot="header-prefix"></base-icon>
+      <template slot="sectionContent">
+        <pro_formVue
+          ref="proForm"
+          :form="false"
+          :rules="rules"
+          :footer="false"
+          :formList="formList"
+          :labelWidth="labelWidth"
+          @formItemConfirm="formItemConfirm"
+        ></pro_formVue> </template
+    ></baseSectionVue>
+  </div>
+</template>
+
+<script>
+import pro_formVue from "../proForm/pro_form.vue";
+import baseSectionVue from "../../base/baseSection/baseSection.vue";
+export default {
+  name: "baseFormWrap",
+  data() {
+    return {
+      sectionOpen: true,
+    };
+  },
+  props: {
+    formTitle: {
+      type: String,
+      require: true,
+    },
+
+    labelWidth: {
+      type: String,
+      default: "100px",
+    },
+
+    formList: {
+      type: Array,
+    },
+
+    rules: {
+      type: Object,
+    },
+  },
+  computed: {
+    iconClass() {
+      if (this.sectionOpen) {
+        return "icon-shouqi";
+      }
+      return "icon-xiala";
+    },
+  },
+  components: {
+    pro_formVue,
+    baseSectionVue,
+  },
+  methods: {
+    formItemConfirm(configItem) {
+      this.$emit("formItemConfirm", configItem);
+    },
+
+    getFormValue() {
+      return this.$refs.proForm.returnFormValue();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.pro-form-wrap {
+  width: 100%;
+  height: auto;
+  margin-bottom: var(--margin-5);
+  .pro-form-wrap-header {
+    width: 100%;
+    height: auto;
+    background: var(--hover-gray);
+  }
+}
+</style>

package/packages/components/proPageTable/index.js

@@ -0,0 +1,6 @@
+import baseProTable from "./oa_pro_table.vue";
+
+baseProTable.install = function (Vue) {
+  Vue.component(baseProTable.name, baseProTable);
+};
+export default baseProTable;