sssss

src/components/components-pub/PubAll.vue

@@ -26,6 +26,7 @@
       :tableConfigArr="tableConfigArr"
       :hasIndex="hasIndex"
       :hasExpand="hasExpand"
+      :border="border"
       @handlerSelectChange="handlerSelectChange"
       @handlerSelect="handlerSelect"
       @handlerSelectAll="handlerSelectAll"
@@ -136,6 +137,12 @@ export default {
         return false;
       },
     },
+    border: {
+      type: Boolean,
+      default: function () {
+        return true;
+      },
+    },
 
     api: {
       type: String,

src/components/myform/MyForm.vue

@@ -1,12 +1,13 @@
 <template>
   <div>
     <el-form
-      :model="formValue"
       ref="formData"
       :label-position="labelPosition"
       class="form-box"
       :rules="rules"
       :inline="inline"
+      :label-width="labelWidth"
+      :model="formValue"
     >
       <template v-for="item in formList">
         <el-form-item :label="item.label" :prop="item.prop">
@@ -31,6 +32,46 @@
               :value="item1.value"
             ></el-option>
           </el-select>
+          <!-- 单选 -->
+          <el-radio-group
+            v-if="item.type === 'Radio'"
+            v-model="formValue[item.prop]"
+          >
+            <el-radio
+              v-for="ra in item.radios"
+              :label="ra.value"
+              :key="ra.value"
+              >{{ ra.label }}</el-radio
+            >
+          </el-radio-group>
+
+          <!-- 单选按钮 -->
+          <el-radio-group
+            v-if="item.type === 'RadioButton'"
+            v-model="formValue[item.prop]"
+            @change="item.change && item.change(formValue[item.prop])"
+          >
+            <el-radio-button
+              v-for="ra in item.radios"
+              :label="ra.value"
+              :key="ra.value"
+              >{{ ra.label }}</el-radio-button
+            >
+          </el-radio-group>
+
+          <!-- 复选框 -->
+          <el-checkbox-group
+            v-if="item.type === 'Checkbox'"
+            v-model="formValue[item.prop]"
+          >
+            <el-checkbox
+              v-for="ch in item.checkboxs"
+              :label="ch.value"
+              :key="ch.value"
+              >{{ ch.label }}</el-checkbox
+            >
+          </el-checkbox-group>
+
           <span v-if="item.type === 'text'">{{ item.value }}</span>
           <quill-editor
             v-if="item.type === 'richText'"
@@ -79,9 +120,12 @@ export default {
 
     labelPosition: {
       type: String,
-      default: function () {
-        return "right";
-      },
+      default: "right",
+    },
+
+    labelWidth: {
+      type: String,
+      default: "",
     },
   },
   data() {
@@ -102,7 +146,7 @@ export default {
     submitForm() {
       this.$refs.formData.validate((valid) => {
         if (valid) {
-          this.$emit("submitForm", this.formValue);
+          // this.$emit("submitForm", this.formValue);
         } else {
           return false;
         }

src/components/mytable/MyTable.vue

@@ -2,7 +2,7 @@
   <div>
     <el-table
       :data="tableData"
-      border
+      :border="border"
       style="width: 100%"
       highlight-current-row
       @selection-change="handlerSelectChange"
@@ -82,6 +82,13 @@ export default {
         return false;
       },
     },
+
+    border: {
+      type: Boolean,
+      default: function () {
+        return true;
+      },
+    },
   },
 
   data() {

src/pages/goods-manage/goods-classify/index.vue

@@ -1,12 +1,218 @@
 <template>
-  <div>产品分类</div>
+  <div class="box">
+    <div class="top_box">
+      <el-button type="primary" @click="handlePop"> 新增</el-button>
+    </div>
+    <pub-all
+      :exportFlag="true"
+      :tableConfigArr="tableConfigArr"
+      api="/synclist"
+      apiVal="sysData"
+      ref="puball"
+      :border="false"
+    >
+    </pub-all>
+
+    <my-pop
+      title="礼品新增"
+      :dialogFormVisible="dialogFormVisible"
+      @handleClose="handleClose"
+      class="dialogClass"
+    >
+      <el-upload
+        class="avatar-uploader"
+        action="https://info.windd.cn/collection/sys/user/upload"
+        :show-file-list="false"
+        :on-success="handleAvatarSuccess"
+        :before-upload="beforeAvatarUpload"
+      >
+        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+        <i v-else class="el-icon-plus avatar-uploader-icon">添加图片</i>
+      </el-upload>
+      <my-form
+        ref="myForm"
+        :formValue="formValue"
+        :formList="formList"
+        :rules="rules"
+      >
+      </my-form>
+      <div class="dialog-footer">
+        <el-button @click="confirm" type="primary">确定</el-button>
+      </div>
+    </my-pop>
+  </div>
 </template>
 
 <script>
 export default {
   name: "goods-classify",
   data() {
-    return {};
+    return {
+      imageUrl: "",
+      tableConfigArr: [
+        {
+          prop: "name",
+          label: "状态",
+        },
+        {
+          fixed: false,
+          prop: "created_time",
+          label: "开始时间",
+        },
+        {
+          fixed: false,
+          prop: "end_time",
+          label: "结束时间",
+        },
+        {
+          prop: "type",
+          label: "同步类型",
+        },
+      ],
+      tableSelect: [
+        {
+          prop: "name",
+          label: "状态",
+        },
+        {
+          fixed: false,
+          prop: "created_time",
+          label: "开始时间",
+        },
+        {
+          fixed: false,
+          prop: "end_time",
+          label: "结束时间",
+        },
+      ],
+
+      formValue: {
+        name: "",
+        number: "",
+        grade: "",
+      },
+      formList: [
+        {
+          type: "input",
+          prop: "name",
+          label: "名称:",
+        },
+        {
+          type: "input",
+          prop: "number",
+          label: "剩余数量:",
+        },
+        {
+          type: "input",
+          prop: "grade",
+          label: "积分（分）:",
+        },
+      ],
+      rules: {
+        name: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        number: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        grade: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+      },
+
+      dialogFormVisible: false,
+    };
+  },
+  methods: {
+    handlePop() {
+      this.dialogFormVisible = !this.dialogFormVisible;
+    },
+    handleClose() {
+      this.formValue = {
+        name: "",
+        number: "",
+        grade: "",
+      };
+      this.$refs.myForm.$refs.formData.resetFields();
+      this.dialogFormVisible = !this.dialogFormVisible;
+    },
+
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw);
+    },
+
+    beforeAvatarUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      console.log(isLt2M);
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isLt2M;
+    },
+    confirm() {
+      this.$refs.myForm.$refs.formData.validate((valid) => {
+        if (valid) {
+          console.log("77777");
+          // this.$emit("submitForm", this.formValue);
+        } else {
+          return false;
+        }
+      });
+    },
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.box {
+  height: 100vh;
+  width: 100%;
+  .top_box {
+    width: 100%;
+    height: 7vh;
+    border-bottom: 1px solid #00bfbf;
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    margin-bottom: 2%;
+  }
+}
+
+::v-deep.dialogClass .el-dialog .el-dialog__body {
+  padding: 0;
+  .el-button--primary {
+    width: 100%;
+  }
+  .el-form {
+    margin: 0 3%;
+  }
+
+  .avatar-uploader .el-upload {
+    // border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+  .avatar-uploader {
+    text-align: center;
+  }
+
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+}
+</style>

src/pages/goods-manage/goods-list/index.vue

@@ -1,12 +1,151 @@
 <template>
-  <div>产品列表</div>
+  <div class="box">
+    <div class="top_box">
+      <el-button type="primary" @click="confirm">确定</el-button>
+    </div>
+    <my-form
+      ref="myForm"
+      :formValue="formValue"
+      :formList="formList"
+      :rules="rules"
+      labelPosition="left"
+      labelWidth="100px"
+    >
+    </my-form>
+  </div>
 </template>
 
 <script>
 export default {
   name: "goods-list",
   data() {
-    return {};
+    return {
+      formValue: {
+        name: "",
+        number: "",
+        grade: "",
+        status: "",
+        status2: [],
+      },
+      formList: [
+        {
+          type: "input",
+          prop: "name",
+          label: "名称:",
+        },
+        {
+          type: "input",
+          prop: "number",
+          label: "剩余数量:",
+        },
+        {
+          type: "input",
+          prop: "grade",
+          label: "积分（分）:",
+        },
+
+        {
+          label: "项目状态",
+          prop: "status",
+          type: "Radio",
+          radios: [
+            { label: "上线", value: 1 },
+            { label: "待上线", value: 2 },
+            { label: "下线", value: 3 },
+          ],
+        },
+
+        {
+          label: "项目状态",
+          prop: "status2",
+          type: "Checkbox",
+          checkboxs: [
+            { label: "西瓜", value: 1 },
+            { label: "苹果", value: 2 },
+            { label: "菠萝", value: 3 },
+          ],
+        },
+      ],
+      rules: {
+        name: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        number: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        grade: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+      },
+    };
+  },
+  methods: {
+    confirm() {
+      this.$refs.myForm.$refs.formData.validate((valid) => {
+        if (valid) {
+          console.log("77777");
+          console.log(this.formValue);
+          // this.$emit("submitForm", this.formValue);
+        } else {
+          return false;
+        }
+      });
+    },
+    handlePop() {},
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.box {
+  height: 100vh;
+  width: 100%;
+  .top_box {
+    width: 100%;
+    height: 7vh;
+    border-bottom: 1px solid #00bfbf;
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    margin-bottom: 2%;
+  }
+}
+
+::v-deep.dialogClass .el-dialog .el-dialog__body {
+  padding: 0;
+  .el-button--primary {
+    width: 100%;
+  }
+  .el-form {
+    margin: 0 3%;
+  }
+
+  .avatar-uploader .el-upload {
+    // border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+  .avatar-uploader {
+    text-align: center;
+  }
+
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+}
+</style>

src/pages/login/index.vue

@@ -70,9 +70,9 @@ export default {
     padding: 20px 20px 0 0;
   }
 }
-::v-deep .el-form {
-  margin-left: 30px !important;
-}
+// ::v-deep .el-form {
+//   margin-left: 30px !important;
+// }
 
 ::v-deep .el-button {
   font-size: 10px;