qj-happy-common-zhongjian 1.0.27

package/src/views/treeTemplate/treeTemplate.md

@@ -0,0 +1,274 @@
+
+####treeTemplate
+>template都是基于element-ui模板进行封装的
+一、搜索栏 temInput
+>**temInput**是一个Array，里面包含多个对象
+>暂且支持类型：text、select、date、daterange、remoteSelect(下拉框的远程搜索)
+
+    {
+	    label:'标题',//可选参数
+	    type:'text',//类型 暂且支持text/select/data/daterange/autocomplete 类型同element一致
+		name:'name', //参数名称
+		value:'',//参数值，默认为空
+		placeholder:"请输入..." //可选参数，提示用语
+    }
+	
+	注意：
+	type == select
+	参数属性多一个options
+	type == daterange
+	参数属性name:"startDate,endDate"
+	type === textMore
+	表示多个
+	{
+          type: "textMore",
+          label: "价格区间",
+          children: [
+            {
+              name: "projectMinprice",
+              placeholder: "请输入最小价格",
+              value: ""
+            },
+            {
+              name: "projectMaxprice",
+              placeholder: "请输入最大价格",
+              value: ""
+            }
+          ]
+        },
+		type=== autocomplete //表示text可远程搜索
+		{
+          type: "autocomplete",
+          name: "classtreeName",
+          label: "搜索",
+          placeholder: "请输入产品编号",
+          restaurants: [
+            { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
+          ],
+          value: ""
+        },
+	
+	temInput的按钮操作
+	属性名称为btnArray:[]
+	{
+		type:'primary',//按钮类型，同element-ui的一致
+		id:'query',//操作的id  id的类型query/search,add
+		label:"搜索",
+		url:"",//搜索的url暂且是定义的全局
+	}
+	当id == 'add',表示需要新增模板
+	需要添加属性
+	template:{
+		type: "json", //json类型暂且只支持json类型的
+        label: "编辑标题",
+        formLabelWidth: "6rem", //长度根据标题长度来，一个字一个rem
+        html:[],//具体详见模板二 input
+	};
+	type === cascader
+	value:[],
+	{
+          type: "cascader",
+          name: "classtreeName",
+          label: "产品分类",
+          showAllLevels:false,//可选参数，判断是否是取最后一集
+          placeholder: "请选择产品分类",
+           props: {
+             value: "value",
+             label: "label",
+             children: "children"
+          },
+          value: [],
+    }
+	
+		
+
+
+
+
+例子:
+
+    temInput:[{
+	    label: "标题",//自定义 title=>label 
+	    type: "text",//类型，暂且只支持text/select/date/daterange/button
+	    name: "name",//参数名称
+		value: "",//值
+	    placeholder: "请输入"//默认提示语，可选参数
+	},
+	{
+	    label: "标题",//自定义
+	    type: "select",//select类型包含options对象，参数label和value
+	    name: "name",//参数名称
+		value: "",//值
+	    placeholder: "请输入"//默认提示语，可选参数
+	    props:{ //可选参数，正对select所需要的label和value
+		    label:'name',
+		    value:'code'
+	    },	    
+	    options:[
+		    {
+			    label:'',
+			    value:''
+		    }
+	    ]
+	},
+	{
+          type: "autocomplete",
+          name: "classtreeName",
+          label: "搜索",
+          placeholder: "请输入产品编号",
+          restaurants: [
+            { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
+          ],
+          value: ""
+    },
+    {
+      label: "标题",    
+      name: 'userPcode', //参数名称
+      type: 'remoteSelect',
+      placeholder: "请输入关键字",
+      value: '',
+      url: '/web/um/userserviceinfo/queryUserinfoservicePage.json',  // 远程搜索所需的url
+      searchParam: 'userinfoCompname',  //远程搜索带的参数名称，值为当前输入的值
+      props: {   //可选参数，正对select所需要的label和value
+        label: 'userinfoCompname',
+        value: 'userinfoCode'
+      }
+    },
+	{
+		btnArray:[ //按钮的对象数组-搜索
+		{
+			type:'primary',//按钮类型，和element-ui类型一致
+			id:'query',//id类型，query表示搜索，add-新增，del-删除 query-搜索 其他不确定类型抛出inputBtnClick（"整个按钮对象","索引值"）方法进行操作
+			label:"搜索",
+			url:''
+		},
+		{
+			type:"primary",
+			id:'add',
+			label:"新增",//当为新增的时候，需使用模板，url是写在模板里面的
+			template:{
+				type: "json", //json类型暂且只支持json类型的
+                title: "编辑标题",
+                formLabelWidth: "6rem", //长度根据标题长度来，一个字一个rem
+                html:[
+                {
+	                label: "名称",
+                    type: "text",//类型暂且只支持text/upload/textarea/select/date
+                    value: "",
+                    name: "brandName"
+                },
+                {
+                  label: "logo",
+                  showFileList: false, //false为单个图片.暂且只支持单个图片编辑
+                  type: "upload",
+                  value: "",
+                  name: "brandLogo"
+                },
+                {
+                  btnArray: [
+                      //id类型，query表示搜索，add-新增，confirm-确定(一般属于编辑里面的)，cancel-取消，del-删除 query-搜索 其他不确定类型抛出inputBtnClick（"整个按钮对象","索引值"）方法进行操作
+                      {
+                        label: "取消", value=>label
+                        id: "cancel"
+                      },
+                      {
+                        type: "primary",
+                        label: "确定",
+                        id: "add",
+                        url: "/web/rs/brand/saveBrand.json"
+                      }
+                    ]
+                },
+                ],
+                rules: {}//规则，和element一致
+			}
+		}
+		]
+	}]
+
+#####二、queryPara (查询所需的默认参数)
+
+     queryPara: {
+       classtreeParentcode: '-1'
+     },
+
+#####三、显示temTree
+>**temTree**是一个对象，包含treeHeader（头部），filter（是否开启查询），treeBtn（右侧按钮），props，indent（tree层级缩进的宽度，默认16）
+例子:
+
+    temTree: {
+        treeHeader: [
+          {
+            name: '分类名称',
+            type: 'first',
+            width: '30%'   // 头部展示的宽度（支持px 和%）
+          },
+          {
+            name: '排序',
+            value: 'tenantCode',
+            width: '20%'
+          },
+          {
+            name: '排序',
+            value: 'tenantCode',
+            width: '20%'
+          },
+          {
+            name: '操作',
+            type: 'button'
+          }
+        ],
+        treeBtn: [
+          {
+            label: '添加子分类',
+            id: 'add',
+            level: 3    //在node的level >=3时不显示该按钮，不填默认都显示
+          },
+          {
+            label: '编辑',
+            id: 'edit'
+          },
+          {
+            label: '删除',
+            id: 'del', // 表示删除
+            type: "danger", //和element一致
+            promptTitle: "确定删除吗？", //提示内容，可选参数,不填则不给提示
+            url: '/web/rs/classtree/deleteClasstree.json', 
+            params: {   //删除带的参数
+              classtreeId: ""
+            },
+          }
+        ],
+        props: {
+          label: 'classtreeName', //指定节点标签为节点对象的某个属性值
+          children: 'childList'  //指定子树为节点对象的某个属性值
+        },
+        indent: 40   //相邻级节点间的水平缩进，单位为像素
+    },
+
+
+#####节点加载数据的方式nodeLoad 
+ 
+    nodeLoad: {
+        lazy: true,   //是否懒加载，默认为false
+        id: 'classtreeCode',  //每个树节点用来作为唯一标识的属性，整棵树应该是唯一的（必填）
+        url: 'web/rs/classtree/queryClasstreePage.json',   //加载数据的url（必须）
+        params: [{   //懒加载的传入参数，name为传入的参数名称，value为在当前节点取的数据值
+          name: 'classtreeParentcode',
+          value: 'classtreeCode'
+        }]
+    } 
+
+#####参数
+| 参数 | 说明 | 类型 | 状态 |
+| :--: | :-------:| :--: | :---: |
+| temInput | 查询框 | Array | 可选 | 
+| queryPara | 获取tree数据的默认参数，<br/>无论是否是懒加载，第一次加载数据会带上该参数 | Object | 必填 | 
+| treeTable | table 数据显示 | Array | 可选 |
+| nodeLoad | 控制树节点的加载方式 | Object | 必填 |
+
+#####API
+| 事件名称 | 说明 | 回调参数 | 例子 |
+| :--------: | :--------:| :--: | :--: |
+|inputBtnClick| temInput 里面其他按钮操作 | (data, index)|-|
+|treeBtnClick| item为当前点击的按钮信息<br>val为当前点击的节点数据信息<br>node为当前点击的节点信息<br> | (item, val, node)|-|

package/src/views/uploadDialog/index copy.vue

@@ -0,0 +1,352 @@
+<template>
+  <el-dialog
+    :title="title"
+    width="55%"
+    :append-to-body="true"
+    :visible.sync="diaVisible"
+    @close="handelClose"
+  >
+    <!-- 点击上传弹出的第一个框 -->
+    <el-form class="dialog-form" v-if="!type || type=='0'">
+      <el-form-item label="上传本地图片" class="dialog-form-item">
+        <el-button type="primary" class="file-btn" @click="changeFile">添加图片</el-button>
+        <span class="el-upload__tip cor-red">只能上传{{imgType}}文件，且不超过{{num || 5}}M，最多上传{{picLimit}}张</span>
+      </el-form-item>
+      <el-form-item label="添加网络图片" class="dialog-form-item">
+        <el-col :span="14">
+          <el-input v-model="fileUrl"></el-input>
+        </el-col>
+        <el-col :span="5" :offset="1">
+          <el-button type="primary" @click="getNetFile">提取</el-button>
+        </el-col>
+      </el-form-item>
+    </el-form>
+    <el-form class="dialog-form" v-else>
+      <el-form-item label="上传本地文件" class="dialog-form-item">
+        <el-button type="primary" class="file-btn" @click="changeFile">添加文件</el-button>
+        <span class="el-upload__tip cor-red">只能上传常见的mp4,ogg,flv,mkv格式文件，且不超过5M，最多上传{{picLimit}}个</span>
+      </el-form-item>
+      <el-form-item label="添加网络文件" class="dialog-form-item">
+        <el-col :span="14">
+          <el-input v-model="fileUrl"></el-input>
+        </el-col>
+        <el-col :span="5" :offset="1">
+          <el-button type="primary" @click="getNetFile">提取</el-button>
+        </el-col>
+      </el-form-item>
+    </el-form>
+    <div class="file-list">
+      <el-upload
+        v-if="!type || type=='0'"
+        ref="picUpload"
+        class="pic-div"
+        :action="fileUploadUrl"
+        :data="otherData"
+        :before-upload="beforeAvatarUpload"
+        :on-success="handelSuccess"
+        :with-credentials="true"
+        :on-remove="handleRemove"
+        list-type="picture-card"
+        :file-list="nFileList"
+        :multiple="multiple"
+      ></el-upload>
+      <el-upload
+        v-else
+        ref="picUpload"
+        :action="fileUploadUrl"
+        :data="otherData"
+        :with-credentials="true"
+        :on-success="handelSuccess"
+        :on-error="handelError"
+        :on-remove="handleRemove"
+        :before-upload="beforeUpload"
+        :file-list="nFileList"
+        :multiple="multiple"
+      ></el-upload>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="diaVisible = false">取消</el-button>
+      <el-button type="primary" @click="setFileList">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import API from "#/api/common";
+import { Loading } from "element-ui";
+import { validateURL } from "#/utils/validate";
+export default {
+  // props: ["fileList", "type", "limit", "visible", fileUploadUrl:{}],
+  props: {
+    fileList: Array,
+    type: String,
+    limit: Number,
+    visible: Boolean,
+    imgType: String,
+    num: Number,
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    fileUploadUrl: {
+      type: String,
+      default: process.env.API_ROOT + "/web/rs/goodsFile/uploadGoodsFile.json"
+    }
+  },
+  data() {
+    return {
+      title: "选择图片",
+      diaVisible: false,
+      fileUrl: "",
+      imgType: "jpg/png/gif",
+      num: 5,
+      picLimit: this.limit || 1,
+      nFileList: this.fileList || [],
+      otherData: {
+        tenantCode: "00000001"
+      },
+      uploading: [] //正在上传的文件集合
+    };
+  },
+
+  // mounted() {
+  //   console.log(this.fileUploadUrl, "111111111111111111111111111111111111111.");
+  //   if (!this.fileUploadUrl) {
+  //     this.fileUploadUrl =
+  //       process.env.API_ROOT + "/web/rs/goodsFile/uploadGoodsFile.json";
+  //   }
+  // },
+  activated() {
+    console.log("组件被激活了");
+  },
+  methods: {
+    uploadPic(index, rows) {
+      //规格上传图片
+      this.rowSer = rows;
+      this.defaultPicList = rows.rsGoodsFileDomainList;
+      this.diaVisible = true;
+    },
+    handelClose() {
+      this.nFileList = [];
+      this.fileUrl = "";
+      this.$refs.picUpload.abort();
+      this.uploading = [];
+      this.$emit("toggle", false);
+    },
+    handleRemove(file, fileList) {
+      //移除正在上传的文件 需要从this.uploading中移除
+      let index = this.uploading.indexOf(file.uid);
+      if (index > -1) {
+        this.uploading.splice(index, 1);
+      }
+      this.nFileList = fileList;
+    },
+    beforeAvatarUpload(file) {
+      console.log(file, "file", this.beforeAvatarUpload);
+      //上传之前的回调
+      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!");
+      }
+      if (isLt2M && fileType) {
+        this.uploading.push(file.uid);
+      }
+      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 < 5;
+      if (!isLt2M) {
+        this.$message.error("上传的文件大小不能超过5MB!");
+      }
+      if (isLt2M && fileType) {
+        this.uploading.push(file.uid);
+      }
+      return isLt2M && fileType;
+    },
+    handelSuccess(response, file, fileList) {
+      console.log(response);
+      console.log(file);
+      console.log(fileList);
+      if (
+        response &&
+        typeof response == "object" &&
+        "success" in response &&
+        !response.success
+      ) {
+        let nJson = JSON.parse(response.data.dataObj);
+        let nUrl = window.location.href;
+        if (process.env.NODE_ENV === "development") {
+          window.location.href =
+            process.env.API_ROOT + nJson.loginurl + "?url=" + nUrl;
+        } else {
+          window.location.href = nJson.loginurl + "?url=" + nUrl;
+        }
+        return;
+      }
+      let njson = {
+        name: file.name,
+        url: response.fileUrl,
+        goodsFileUrl: response.fileUrl,
+        uid: file.uid,
+        goodsFileType: this.type,
+        goodsFileName: response.fileCode,
+        status: "success"
+      };
+      //文件上传 需要从this.uploading中移除
+      let index = this.uploading.indexOf(file.uid);
+      this.uploading.splice(index, 1);
+
+      fileList.splice(fileList.indexOf(file), 1, njson);
+      console.log(fileList);
+      this.nFileList = fileList;
+    },
+    handelError(error, file, fileList) {
+      console.log(
+        response,
+        this.fileUploadUrl,
+        "handelErrorhandelErrorhandelErrorhandelErrorhandelErrorhandelErrorhandelErrorhandelError"
+      );
+      console.log(file);
+      console.log(fileList);
+    },
+    changeFile() {
+      if (this.nFileList.length >= this.picLimit) {
+        this.$message.error(
+          `最多上传${this.picLimit}${this.type == "0" ? "张图片" : "个文件"}`
+        );
+        return;
+      }
+      this.$refs.picUpload.$refs["upload-inner"].$el.dispatchEvent(
+        new MouseEvent("click")
+      );
+    },
+    getNetFile() {
+      if (this.nFileList.length >= this.picLimit) {
+        this.$message.error(
+          `最多上传${this.picLimit}${this.type == "0" ? "张图片" : "个文件"}`
+        );
+        this.fileUrl = "";
+        return;
+      }
+      if (validateURL(this.fileUrl)) {
+        let fileInfo = {
+          url: this.fileUrl,
+          goodsFileUrl: this.fileUrl,
+          name: this.fileUrl,
+          goodsFileType: this.type
+        };
+        this.nFileList.push(fileInfo);
+        this.fileUrl = "";
+      } else {
+        this.$message.error("请输入正确的图片地址");
+      }
+    },
+    setPicList(response, file, fileList) {},
+    beyond() {
+      //图片个数超出的验证
+      this.$message.error("最多5张!");
+    },
+    setFileList() {
+      let nList = [];
+      if (this.nFileList.length > 0) {
+        nList = JSON.parse(JSON.stringify(this.nFileList));
+      }
+      console.log(this.$refs.picUpload);
+      if (this.uploading.length > 0) {
+        this.$confirm(
+          "请确认所有文件都上传完成，继续操作会移除正在上传的文件！",
+          "提示",
+          {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }
+        )
+          .then(() => {
+            this.$refs.picUpload.abort();
+            this.$emit("setFileList", nList);
+            this.diaVisible = false;
+          })
+          .catch(() => {});
+      } else {
+        this.$emit("setFileList", nList);
+        this.diaVisible = false;
+      }
+    }
+  },
+  mounted() {
+    console.log(this.multiple, "multiple");
+  },
+  watch: {
+    visible() {
+      this.diaVisible = this.visible;
+      if (this.visible) {
+        let nList = [];
+        if (this.fileList.length > 0) {
+          nList = JSON.parse(JSON.stringify(this.fileList));
+          nList.forEach(item => {
+            item.url = item.goodsFileUrl || item.url;
+          });
+        }
+        this.$nextTick(() => {
+          this.$refs.picUpload.$refs["upload-inner"].$el.style.display = "none";
+        });
+        this.nFileList = nList;
+      }
+      if (this.type && this.type == "1") {
+        this.title = "选择文件";
+      } else {
+        this.title = "选择图片";
+      }
+    },
+    limit() {
+      this.picLimit = this.limit || 1;
+    },
+    fileList() {
+      let nList = [];
+      if (this.fileList.length > 0) {
+        nList = JSON.parse(JSON.stringify(this.fileList));
+      }
+      this.nFileList = nList;
+      console.log(this.nFileList);
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dialog-form {
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: 20px;
+  .dialog-form-item {
+    width: 100% !important;
+    margin-left: 0 !important;
+  }
+}
+.el-dialog {
+  border-radius: 6px;
+}
+.file-btn {
+  position: relative;
+  overflow: hidden;
+}
+.file-input {
+  display: none;
+}
+.cor-red {
+  color: #ff0000;
+}
+</style>