qj-common 4.3.0 → 4.3.2

package/src/views/templates/templateInput.vue

@@ -1,421 +1,421 @@
-<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) {
-                    if (el.format) {
-                      data[el.name] = el.format(el.value);
-                    } else {
-                      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>
+<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) {
+                    if (el.format) {
+                      data[el.name] = el.format(el.value);
+                    } else {
+                      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>