qj-happy-common-zhongjian 1.0.27

package/src/views/templates/components/temp-upload.vue

@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <!--imgs-->
+    <el-upload
+      v-if="item.type === 'upload' && (!item.fileType || item.fileType === 'image') && item.showFileList"
+      action="'xxxxxxx'"
+      :showFileList="showFileList = item.showFileList"
+      :name="uploadName = item.name"
+      :index="imgIndex=index"
+      :uploadUrl="uploadUrl='url' in item ? item.url : uploadUrl"
+      :http-request="picUpload"
+      list-type="picture-card"
+      :limit="limit ='limit' in item ? item.limit : 1"
+      :on-exceed="exceed"
+      :before-upload="beforeAvatarUpload"
+      :on-remove="handleRemove"
+      class="el-upload-add"
+    >
+      <i class="el-icon-plus" v-loading="imgLoading"></i>
+    </el-upload>
+    <!--img-->
+    <el-upload
+      v-loading="imgLoading"
+      v-if="item.type === 'upload' && (!item.fileType || item.fileType === 'image') && !item.showFileList"
+      action="'xxxxxxx'"
+      :showFileList="showFileList = item.showFileList || false"
+      :name="uploadName = item.name"
+      :uploadUrl="uploadUrl='url' in item ? item.url : uploadUrl"
+      :http-request="picUpload"
+      :index="imgIndex =index"
+      :before-upload="beforeAvatarUpload"
+    >
+      <img v-if="item.value" :src="imageUrl=item.value" class="avatar">
+      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+    </el-upload>
+
+    <el-upload
+      v-loading="imgLoading"
+      v-if="item.type === 'upload' && item.fileType === 'video'"
+      action="'xxxxxxx'"
+      :showFileList="showFileList = item.showFileList"
+      :file-list="fileList"
+      :name="uploadName = item.name"
+      :uploadUrl="uploadUrl='url' in item ? item.url : uploadUrl"
+      :http-request="picUpload"
+      :index="imgIndex =index"
+      :before-upload="beforeUpload"
+    >
+      <el-button size="small" type="primary">点击上传</el-button>
+    </el-upload>
+  </div>
+</template>
+<script>
+import request from "#/utils/request";
+export default {
+  props: ["item", "index"],
+  data() {
+    return {
+      fileList: [],
+      restaurants: null,
+      showFileList: null, //单个图片还是多个图片状态
+      imgLoading: false, //图片loading状态
+      uploadName: null, //上传图片name
+      imgIndex: null, //多个上传图片的位置
+      uploadUrl: "/web/rs/goodsFile/uploadGoodsFile.json", //图片上传的默认url
+      imageUrl: "" //单个图片的imgurl,
+    };
+  },
+  mounted() {},
+  methods: {
+    exceed() {
+      //图片个数超出的验证
+      this.$message.error(`最多上传${this.limit}张!`);
+    },
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw);
+      console.log(this.imageUrl);
+    },
+    picUpload(_file) {
+      this.imgLoading = true;
+      var formData = new FormData();
+
+      formData.append("file", _file.file);
+      console.log(formData, "formData");
+      return request({
+        url: this.uploadUrl,
+        method: "post",
+        data: formData
+      })
+        .then(res => {
+           if(res.errorCode=="error"){
+            console.log(res.errorCode,"res.errorCode1");
+            this.$message.error(res.msg)
+          }
+          console.log(this.showFileList, this.uploadName, this.imgIndex);
+          if (this.showFileList && this.uploadName) {
+            //表示多个图片
+            //组件中添加showFileList就是判断是否是单个图片
+            this.item.value.push({
+              url: res.fileUrl,
+              uid: file.file.uid
+            });
+          } else if (this.item.fileType === "video") {
+            this.fileList.push({
+              name: item.value,
+              url: item.value
+            });
+            this.item.value = res.fileUrl;
+            this.$set(this.item, "value", res.fileUrl);
+            this.$parent.$parent.validateField(item.name);
+          } else {
+            this.item.value = res.fileUrl;
+            this.$set(this.item, "value", res.fileUrl);
+            this.$parent.$parent.validateField(item.name);
+          }
+          this.imgLoading = false;
+        })
+        .catch(() => {
+          this.imgLoading = false;
+          //未对失败做优化
+          console.log("上传失败");
+        });
+    },
+    handleRemove(file, fileList) {},
+    beforeAvatarUpload(file) {
+      //上传之前的回调
+      this.item.value = "";
+      const fileType = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(
+        file.name.toLowerCase()
+      );
+      if (!fileType) {
+        this.$message.error("图片格式为常见的jpg、png、gif格式！");
+      }
+      const isLt2M = file.size / 1024 / 1024 < 5;
+      if (!isLt2M) {
+        this.$message.error("上传的图片大小不能超过 5MB!");
+      }
+      return isLt2M && fileType;
+    },
+    beforeUpload(file) {
+      //上传之前的回调
+      const fileType = /\.(mp4|ogg|flv|mkv|MP4|FLV|MKV|OGG)$/.test(
+        file.name.toLowerCase()
+      );
+      if (!fileType) {
+        this.$message.error("文件格式为常见的mp4,ogg,flv,mkv格式！");
+      }
+      const isLt2M = file.size / 1024 / 1024 < 100;
+      if (!isLt2M) {
+        this.$message.error("上传的文件大小不能超过100MB!");
+      }
+      if (isLt2M && fileType) {
+        this.uploading.push(file.uid);
+      }
+      return isLt2M && fileType;
+    },
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw);
+      console.log(this.imageUrl);
+    },
+    handelError(error, file, fileList) {
+      console.log(response);
+      console.log(file);
+      console.log(fileList);
+    },
+    handleRemove(file, fileList) {
+      this.item.value = "";
+    }
+  },
+  watch: {
+    item: {
+      handler() {
+        if (this.item.fileType === "video" && this.item.value) {
+          this.fileList = [];
+          this.fileList.push({
+            name: item.value,
+            url: item.value
+          });
+        }
+      },
+      deep: true //深度监听
+    }
+  }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-icon-plus.avatar-uploader-icon {
+  line-height: 100px;
+}
+</style>
+<style>
+.template-input .el-upload-list--picture-card .el-upload-list__item,
+.template-input .el-upload--picture-card {
+  width: 100px;
+  height: 100px;
+}
+.template-input .el-upload--picture-card {
+  line-height: 104px;
+}
+.template-input .el-select {
+  width: 220px;
+}
+.template-input .el-form-item__content .el-loading-mask {
+  width: 102px;
+  height: 102px;
+}
+
+.template-input .el-upload-add .el-loading-mask {
+  top: -36px;
+  right: 72px;
+  left: initial;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  border: 1px dashed #c0ccda;
+  border-radius: 6px;
+  background-color: #fbfdff;
+}
+.avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+.el-upload,
+.el-upload img {
+  /* border: 1px dashed #c0ccda; */
+  border-radius: 6px;
+}
+</style>

package/src/views/templates/readme.md

@@ -0,0 +1,2 @@
+###三、分页的方法
+####

package/src/views/templates/templateInput.vue

@@ -0,0 +1,417 @@
+<template>
+  <div class="template-input auto">
+    <h3 class="template-title" v-if="title">
+      <p>{{ title }}</p>
+    </h3>
+    <el-form v-if="temInput" :model="ruleForm" :rules="rules ? rules : {}" ref="ruleForm" :label-width="labelWidth ? labelWidth : '10rem'" class="demo-ruleForm">
+      <el-form-item
+        v-for="(item, index) in temInput"
+        :key="index"
+        v-if="('state' in item ? item.state : true) && ('btnArray' in item ? true : 'label' in item)"
+        :label="'label' in item && ('state' in item ? item.state : true) ? item.label + '：' : ''"
+        :prop="'name' in item ? item.name : ''"
+      >
+        <div v-if="'type' in item && 'state' in item ? item.state : true">
+          <el-input
+            v-if="item.type === 'text'"
+            auto-complete="new-password"
+            :disabled="'disabled' in item && item.disabled ? item.disabled : false"
+            v-model.trim="item.value"
+            clearable
+            :placeholder="'placeholder' in item ? item.placeholder : ''"
+            @blur="inputBlur(item)"
+          ></el-input>
+          <el-input
+            v-if="item.type === 'number'"
+            :disabled="'disabled' in item && item.disabled ? item.disabled : false"
+            type="number"
+            v-model.trim="item.value"
+            :min="item.min || ''"
+            :max="item.max || ''"
+            :placeholder="'placeholder' in item ? item.placeholder : ''"
+            @change="numberHandler(item)"
+          ></el-input>
+          <el-input v-if="item.type === 'password'" type="password" v-model="item.value" auto-complete="new-password" :placeholder="'placeholder' in item ? item.placeholder : ''"></el-input>
+          <el-select
+            v-if="item.type === 'select'"
+            :disabled="'disabled' in item && item.disabled ? item.disabled : false"
+            v-model.trim="item.value"
+            auto-complete="new-password"
+            :placeholder="'placeholder' in item ? item.placeholder : ''"
+            :filterable="'filterable' in item ? item.filterable : false"
+            :multiple="'multiple' in item ? item.multiple : false"
+            @change="selChange($event, item)"
+            clearable
+          >
+            <el-option
+              v-for="(itemOption, indexOption) in item.options"
+              :key="indexOption"
+              :label="'props' in item ? itemOption[item.props.label] : itemOption.label"
+              :value="'props' in item ? itemOption[item.props.value] : itemOption.value"
+            ></el-option>
+          </el-select>
+          <el-date-picker
+            v-if="item.type === 'date' || item.type === 'datetime' || item.type === 'datetimerange' || item.type === 'daterange'"
+            v-model.trim="item.value"
+            :type="item.type"
+            :placeholder="'placeholder' in item ? item.placeholder : ''"
+            :value-format="item.format || 'yyyy-MM-dd'"
+            :picker-options="'pickerOptions' in item ? item.pickerOptions : {}"
+          ></el-date-picker>
+
+          <temp-select v-if="item.type === 'remoteSelect'" @selChange="selChange" :item="item"></temp-select>
+
+          <!-- <el-select v-if="item.type ==='select'" :readonly="'readonly' in item && item.readonly? item.readonly : false " v-model="item.value" :placeholder="'placeholder' in item ? item.placeholder : ''" @change="selChange($event,item)">
+                <el-option v-for="(itemOption , indexOption) in item.options" :key="indexOption" :label="itemOption.pntreeName" :value="itemOption.pntreeId"></el-option>
+          </el-select>-->
+          <el-cascader
+            v-if="item.type === 'cascader'"
+            :show-all-levels="'showAllLevels' in item ? item.showAllLevels : true"
+            :disabled="'disabled' in item && item.disabled ? item.disabled : false"
+            :placeholder="'placeholder' in item ? item.placeholder : ''"
+            :options="'options' in item ? item.options : []"
+            :props="'props' in item ? item.props : {}"
+            :collapse-tags="'collapseTags' in item ? item.collapseTags : true"
+            filterable
+            size="small"
+            v-model="item.value"
+          ></el-cascader>
+          <el-switch v-if="item.type === 'switch'" :disabled="'disabled' in item && item.disabled ? item.disabled : false" v-model.trim="item.value"></el-switch>
+          <el-checkbox-group v-if="item.type === 'checkbox'" :disabled="'disabled' in item && item.disabled ? item.disabled : false" v-model.trim="item.value">
+            <el-checkbox v-for="(itemCheckbox, indexCheckbox) in item.checkboxGroup" :key="indexCheckbox" :label="itemCheckbox.value" :name="item.name">{{ itemCheckbox.label }}</el-checkbox>
+          </el-checkbox-group>
+          <el-radio-group :disabled="'disabled' in item && item.disabled ? item.disabled : false" v-if="item.type === 'radio'" v-model.trim="item.value" @change="radioChange(item.value, item)">
+            <el-radio v-for="(itemRadio, indexRadio) in item.radioGroup" :key="indexRadio" :label="itemRadio.value" :name="item.name">{{ itemRadio.label }}</el-radio>
+          </el-radio-group>
+          <el-input v-if="item.type === 'textarea'" type="textarea" :disabled="'disabled' in item && item.disabled ? item.disabled : false" v-model.trim="item.value"></el-input>
+          <!--input 支持搜索-->
+          <el-autocomplete
+            v-if="item.type === 'autocomplete'"
+            v-model.trim="item.value"
+            :loadAll="(restaurants = item.restaurants)"
+            :fetch-suggestions="querySearchAsync"
+            :placeholder="item.placeholder"
+            @select="handleSelect"
+          ></el-autocomplete>
+          <temp-upload v-if="item.type === 'upload'" :item="item" :index="index"></temp-upload>
+          <!-- 消息提示 或者提示字段 -->
+          <template v-if="'prompt' in item">
+            <span v-if="item.prompt.type == 'text'">{{ item.prompt.content }}</span>
+            <el-tooltip
+              v-if="item.prompt.type == 'tooltip'"
+              class="item"
+              :effect="item.prompt.effect || dark"
+              :content="item.prompt.content || '暂无提示'"
+              :placement="item.prompt.placement || 'right'"
+            >
+              <span v-html="item.prompt.html"></span>
+            </el-tooltip>
+          </template>
+        </div>
+        <el-button v-if="'btnArray' in item" v-for="(itemBtn, indexBtn) in item.btnArray" :key="indexBtn" :type="itemBtn.type" @click="btn(itemBtn, indexBtn)">{{ itemBtn.label }}</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- <div>rule:{{ruleForm}}</div> -->
+  </div>
+</template>
+<script>
+import request from '#/utils/request';
+import tempSelect from './components/temp-select';
+import tempUpload from './components/temp-upload';
+const querystring = require('querystring');
+export default {
+  props: ['temInput', 'rules', 'labelWidth', 'tabState', 'title'],
+  components: {
+    tempSelect,
+    tempUpload,
+  },
+  data() {
+    return {
+      restaurants: null,
+      showFileList: null, //单个图片还是多个图片状态
+      imgLoading: false, //图片loading状态
+      uploadName: null, //上传图片name
+      imgIndex: null, //多个上传图片的位置
+      uploadUrl: '/web/rs/goodsFile/uploadGoodsFile.json', //图片上传的默认url
+      imageUrl: '', //单个图片的imgurl,
+    };
+  },
+  mounted() {},
+  methods: {
+    btn(itemBtn, indexBtn) {
+      if (itemBtn.id === 'reset') {
+        //重置
+        this.setReset();
+      } else if (itemBtn.id == 'confirm') {
+        //表示确定
+        this.setData(itemBtn.url, 'ruleForm', itemBtn.params);
+      } else if (itemBtn.id == 'cancel') {
+        //表示取消
+        this.$emit('cancel', itemBtn, indexBtn); //只是表示取消显示
+      } else if (itemBtn.id == 'add') {
+        //新增
+        this.setData(itemBtn.url, 'ruleForm', itemBtn.params);
+      }
+      this.$emit('inputBtnClick', itemBtn, indexBtn);
+    },
+    querySearchAsync(queryString, cb) {
+      var restaurants = this.restaurants;
+      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        cb(results);
+      }, 3000 * Math.random());
+    },
+    createStateFilter(queryString) {
+      return (state) => {
+        return state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+      };
+    },
+    handleSelect(item) {
+      console.log('开始选');
+      this.$emit('handleSelect', item);
+    },
+    exceed() {
+      //图片个数超出的验证
+      this.$message.error(`最多上传${this.limit}张!`);
+    },
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw);
+      console.log(this.imageUrl);
+    },
+    numberHandler(item) {
+      // debugger;
+      if ((item.min || item.min == 0) && item.value * 1 <= item.min) {
+        item.value = item.min;
+      }
+      if ((item.max || item.max == 0) && item.value * 1 >= item.max) {
+        item.value = item.max;
+      }
+      console.log(item, '34');
+    },
+    setReset() {
+      //数据重置
+      this.$refs['ruleForm'].resetFields();
+      this.temInput.forEach((el) => {
+        if ('label' in el) {
+          if (el.type === 'cascader') {
+            el.value = [];
+          } else {
+            el.value = '';
+          }
+          if (el.defaultValue) {
+            el.value = el.defaultValue;
+          }
+        }
+      });
+    },
+    clearValidate() {
+      //清除正则
+      this.$refs['ruleForm'].clearValidate();
+    },
+    inputBlur(item) {
+      this.$emit('inputBlur', item);
+    },
+    radioChange(val, item) {
+      //当需要切换改变时
+      if (this.tabState) {
+        this.tabState.value = this.ruleForm[this.tabState.name];
+        for (let i in this.tabState.dataTemplate) {
+          if (i === this.tabState.value) {
+            this.temInput.forEach((el) => {
+              if ('state' in el) {
+                if (this.tabState.dataTemplate[i].includes(el.name)) {
+                  el.state = true; //是否显示
+                } else {
+                  'other' in el && el.other ? '' : (el.state = false);
+                }
+              }
+              //清空数据
+              if (el.value instanceof Array && ('empty' in el ? el.empty : true) && !(el.type === 'upload')) {
+                el.value = [];
+              } else if ('empty' in el ? el.empty : true && !(el.type === 'upload')) {
+                el.value = '';
+              }
+            });
+          }
+        }
+      }
+      console.log('radio change');
+      this.$emit('radioChange', val, item);
+    },
+    setData(url, formName, params) {
+      //编辑确定
+      this.$refs[formName].validate((valid) => {
+        //编辑验证
+        if (valid) {
+          if (url) {
+            let data = JSON.parse(JSON.stringify(this.ruleForm)); //去除数据的双向绑定
+            this.temInput.forEach((el) => {
+              if ('label' in el) {
+                if (el.type === 'cascader') {
+                  if (el.value.length > 0) {
+                    data[el.name] = el.value[el.value.length - 1];
+                  } else {
+                    data[el.name] = '';
+                  }
+                }
+              }
+            });
+            for (let el in data) {
+              if (data[el] === '') {
+                delete data[el];
+              }
+            }
+            //编辑请求接口
+            let jsondata = {};
+            let jsondataa = '';
+            if (params) {
+              jsondata[params] = JSON.stringify(data);
+              // console.log(...jsondata, "llllll");
+
+              request({
+                url: url,
+                method: 'post',
+                data: querystring.stringify(jsondata),
+              }).then((res) => {
+                if (res.success) {
+                  this.$message({
+                    message: res.msg,
+                    type: 'success',
+                  });
+                  this.$emit('cancel'); //取消显示
+                  this.$emit('getData'); //成功后更新数据
+                } else {
+                  this.$message.error(res.msg);
+                }
+              });
+            } else {
+              request({
+                url: url,
+                method: 'post',
+                data: querystring.stringify(data),
+              }).then((res) => {
+                if (res.success) {
+                  this.$message({
+                    message: res.msg,
+                    type: 'success',
+                  });
+                  this.$emit('cancel'); //取消显示
+                  this.$emit('getData'); //成功后更新数据
+                } else {
+                  this.$message.error(res.msg);
+                }
+              });
+            }
+          }
+        }
+      });
+    },
+    selChange(val, item) {
+      //select选中的事件
+      console.log(item, '目前选中的值');
+      console.log(this.temInput);
+      this.$emit('selChange', val, item);
+    },
+  },
+  computed: {
+    ruleForm: {
+      get() {
+        let ruleForm = {};
+        // console.log(this.temInput, "ccccccccccccccc");
+        this.temInput.forEach((el) => {
+          if ('state' in el) {
+            el.state && el.name ? this.$set(ruleForm, el.name, el.value) : '';
+          } else {
+            el.name ? this.$set(ruleForm, el.name, el.value) : '';
+          }
+        });
+        // console.log(ruleForm, "ruleFormruleForm");
+        // this.$refs["ruleForm"].resetFields();
+        return ruleForm;
+      },
+      set(val) {
+        console.log('为空');
+      },
+    },
+  },
+};
+</script>
+<style>
+/* body {
+  overflow: auto !important;
+} */
+.template-input .el-upload-list--picture-card .el-upload-list__item,
+.template-input .el-upload--picture-card {
+  width: 100px;
+  height: 100px;
+}
+.template-input .el-upload--picture-card {
+  line-height: 104px;
+}
+.template-input .el-select {
+  width: 220px;
+}
+.template-input .el-form-item__content .el-loading-mask {
+  width: 102px;
+  height: 102px;
+}
+
+.template-input .el-upload-add .el-loading-mask {
+  top: -36px;
+  right: 72px;
+  left: initial;
+}
+.template-input .el-input {
+  width: 220px;
+}
+</style>
+<style scoped>
+.auto {
+  padding: 20px;
+}
+
+.template-title {
+  font-weight: normal;
+  font-size: 18px;
+  padding-left: 10px;
+  background: #f8f8f8;
+  height: 46px;
+  line-height: 46px;
+  margin-bottom: 20px;
+}
+.template-title p {
+  font-weight: normal;
+  font-size: 18px;
+  border-left: 3px solid #409eff;
+  margin: 13px;
+  background: #f8f8f8;
+  line-height: 20px;
+  padding-left: 6px;
+  height: 20px;
+  float: left;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  height: 100px;
+  line-height: 100px !important;
+  text-align: center;
+  border: 1px dashed #c0ccda;
+  border-radius: 6px;
+  background-color: #fbfdff;
+}
+.avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+.el-upload,
+.el-upload img {
+  /* border: 1px dashed #c0ccda; */
+  border-radius: 6px;
+}
+</style>