ソースを参照

禁止输入空格

lilei 4 年 前
コミット
9a386685fe
3 ファイル変更174 行追加247 行削除
  1. 22 18
      src/main.js
  2. 150 228
      src/views/tenants/tenantsModal.vue
  3. 2 1
      vue.config.js

+ 22 - 18
src/main.js

@@ -8,39 +8,43 @@ import store from './store/'
 import { VueAxios } from './utils/request'
 
 // mock
-//import './mock'
+// import './mock'
 
 import bootstrap from './core/bootstrap'
 import './core/use'
 import './permission' // permission control
-import './utils/filter' // global filter
+import './utils/filter'
+
+import VueCookies from 'vue-cookies' // global filter
 
 Vue.config.productionTip = false
 
 // mount axios Vue.$http and this.$http
 Vue.use(VueAxios)
-
-import VueCookies from 'vue-cookies'
 Vue.use(VueCookies)
 Vue.$cookies.config('7d')
 /**
  * 权限检查
  */
 Vue.prototype.$hasPermissions = function (value) {
- let isExist = false;
- const roles = store.getters.roles
- const permissionList = roles.permissionList
- //console.log(permissionsStr,'permissionsStr')
- if (permissionList == undefined || permissionList == null) {
-  return false;
- }
- let has = permissionList.find(item => {
-   return item == value
- })
- if (has) {
-  isExist = true;
- }
- return isExist;
+  let isExist = false
+  const roles = store.getters.roles
+  const permissionList = roles.permissionList
+  // console.log(permissionsStr,'permissionsStr')
+  if (permissionList == undefined || permissionList == null) {
+    return false
+  }
+  const has = permissionList.find(item => {
+    return item == value
+  })
+  if (has) {
+    isExist = true
+  }
+  return isExist
+}
+// 禁止输入框输入空格,换行符,<,>
+Vue.prototype.$filterEmpty = function (e) {
+  return e.target.value.replace(/\s|\r\n|\n|<|>/g, '')
 }
 new Vue({
   router,

+ 150 - 228
src/views/tenants/tenantsModal.vue

@@ -9,25 +9,15 @@
               <a-input
                 allowClear
                 :maxLength="30"
-                v-decorator="[
-                  'formData.name',
-                  { initialValue: formData.name,
-                    rules: [{ required: true, message: '请输入企业名称!' }] },
-                ]"
-                placeholder="请输入企业名称" />
+                v-decorator="['formData.name', { initialValue: formData.name,getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入企业名称!' }] }]"
+                placeholder="请输入企业名称(最多30个字符)"
+              />
             </a-form-item>
           </a-col>
           <a-col :span="12">
             <!-- 企业编码 -->
             <a-form-item label="企业编码:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
-              <a-input
-                allowClear
-                :maxLength="30"
-                v-decorator="[
-                  'formData.bizCode',
-                  { initialValue: formData.bizCode, },
-                ]"
-                placeholder="请输入企业编码" />
+              <a-input allowClear :maxLength="30" v-decorator="['formData.bizCode', { initialValue: formData.bizCode,getValueFromEvent: $filterEmpty }]" placeholder="请输入企业编码" />
             </a-form-item>
           </a-col>
         </a-row>
@@ -35,15 +25,7 @@
           <a-col :span="12">
             <!-- 负责人名称 -->
             <a-form-item label="负责人名称:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
-              <a-input
-                allowClear
-                :maxLength="30"
-                v-decorator="[
-                  'formData.contactName',
-                  { initialValue: formData.contactName,
-                    rules: [] },
-                ]"
-                placeholder="请输入负责人名称" />
+              <a-input allowClear :maxLength="30" v-decorator="['formData.contactName', { initialValue: formData.contactName,getValueFromEvent: $filterEmpty, rules: [] }]" placeholder="请输入负责人名称(最多30个字符)" />
             </a-form-item>
           </a-col>
           <a-col :span="12">
@@ -54,15 +36,10 @@
                 :maxLength="11"
                 v-decorator="[
                   'formData.contactPhone',
-                  { initialValue: formData.contactPhone,
-                    rules: [{ required: true,
-                              message:'请输入负责人手机号!'
-                            },
-                            { pattern:/^\d{11}$/, message:'请输入正确的负责人手机号'}
-                    ]
-                  },
+                  { initialValue: formData.contactPhone, rules: [{ required: true, message: '请输入负责人手机号!' }, { pattern: /^\d{11}$/, message: '请输入正确的负责人手机号' }] }
                 ]"
-                placeholder="请输入负责人手机" />
+                placeholder="请输入负责人手机"
+              />
             </a-form-item>
           </a-col>
         </a-row>
@@ -75,13 +52,12 @@
                 :disabled-date="disabledDate"
                 @change="expireDateChange"
                 placeholder="年/月/日"
-                v-decorator="[
-                  'formData.expireDate',
-                  { initialValue: formData.expireDate,
-                    rules: [{type: 'object', required: true, message: '请选择使用有效期!' }] },
-                ]" />
+                v-decorator="['formData.expireDate', { initialValue: formData.expireDate, rules: [{ type: 'object', required: true, message: '请选择使用有效期!' }] }]"
+              />
               <p>
-                常选:<span class="time-text" @click="timeFilter(3)">3天</span> <span class="time-text" @click="timeFilter(30)">1个月</span>
+                常选:
+                <span class="time-text" @click="timeFilter(3)">3天</span>
+                <span class="time-text" @click="timeFilter(30)">1个月</span>
                 <span class="time-text" @click="timeFilter(365)">1年</span>
               </p>
             </a-form-item>
@@ -89,19 +65,9 @@
           <a-col :span="12">
             <!-- 启用状态 -->
             <a-form-item label="启用状态:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
-              <a-radio-group
-                @change="onStatusChange"
-                v-decorator="[
-                  'formData.status',
-                  { initialValue: formData.status,
-                    rules: [{ required: true, message: '请选择启用状态!' }] },
-                ]">
-                <a-radio :value="1">
-                  是
-                </a-radio>
-                <a-radio :value="0">
-                  否
-                </a-radio>
+              <a-radio-group @change="onStatusChange" v-decorator="['formData.status', { initialValue: formData.status, rules: [{ required: true, message: '请选择启用状态!' }] }]">
+                <a-radio :value="1">是</a-radio>
+                <a-radio :value="0">否</a-radio>
               </a-radio-group>
             </a-form-item>
           </a-col>
@@ -114,12 +80,9 @@
                 ref="orgType"
                 allowClear
                 @change="scopeTypeChange"
-                v-decorator="[
-                  'formData.scopeType',
-                  { initialValue: formData.scopeType,
-                    rules: [{ required: true, message: '请选择使用权限!' }] },
-                ]"
-                code="STORE_AUTH_TYPE"></v-select>
+                v-decorator="['formData.scopeType', { initialValue: formData.scopeType, rules: [{ required: true, message: '请选择使用权限!' }] }]"
+                code="STORE_AUTH_TYPE"
+              ></v-select>
             </a-form-item>
           </a-col>
         </a-row>
@@ -127,90 +90,47 @@
           <!-- 地址 -->
           <a-col span="9">
             <a-form-item label="地址:" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
-              <a-select
-                @change="getCityList"
-                v-decorator="[
-                  'formData.addrProvince',
-                  { initialValue: formData.addrProvince,
-                    rules: [] },
-                ]"
-                placeholder="请选择省">
-                <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id+'a'">{{ item.name }}</a-select-option>
+              <a-select @change="getCityList" v-decorator="['formData.addrProvince', { initialValue: formData.addrProvince, rules: [] }]" placeholder="请选择省">
+                <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
               </a-select>
             </a-form-item>
           </a-col>
           <a-col span="7">
             <a-form-item prop="addrCity">
-              <a-select
-                v-decorator="[
-                  'formData.addrCity',
-                  { initialValue: formData.addrCity,
-                    rules: [] },
-                ]"
-                @change="getAreaList"
-                placeholder="请选择市">
-                <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id+'b'">{{ item.name }}</a-select-option>
+              <a-select v-decorator="['formData.addrCity', { initialValue: formData.addrCity, rules: [] }]" @change="getAreaList" placeholder="请选择市">
+                <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
               </a-select>
             </a-form-item>
           </a-col>
           <a-col span="7">
             <a-form-item prop="addrDistrict">
-              <a-select
-                v-decorator="[
-                  'formData.addrDistrict',
-                  { initialValue: formData.addrDistrict,
-                    rules: [] },
-                ]"
-                @change="areaCharged"
-                placeholder="请选择区/县">
-                <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id+'c'">{{ item.name }}</a-select-option>
+              <a-select v-decorator="['formData.addrDistrict', { initialValue: formData.addrDistrict, rules: [] }]" @change="areaCharged" placeholder="请选择区/县">
+                <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
               </a-select>
             </a-form-item>
           </a-col>
-        </a-row >
+        </a-row>
         <a-row :gutter="24">
           <a-col :span="17">
             <!-- 详细地址 -->
             <a-form-item label="详细地址" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
-              <a-input
-                :maxLength="30"
-                allowClear
-                placeholder="请输入详细地址"
-                v-decorator="[
-                  'formData.addrDetail',
-                  { initialValue: formData.addrDetail,
-                    rules: [] },
-                ]" />
+              <a-input :maxLength="30" allowClear placeholder="请输入详细地址(最多30个字符)" v-decorator="['formData.addrDetail', { initialValue: formData.addrDetail,getValueFromEvent: $filterEmpty, rules: [] }]" />
             </a-form-item>
           </a-col>
         </a-row>
         <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
-          <a-button type="primary" @click="handleSubmit()">
-            确定
-          </a-button>
-          <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()">
-            取消
-          </a-button>
+          <a-button type="primary" @click="handleSubmit()">保存</a-button>
+          <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()">取消</a-button>
         </a-form-item>
       </a-form>
-
     </a-modal>
   </div>
 </template>
 
 <script>
-import {
-  STable,
-  VSelect
-} from '@/components'
-import {
-  getProvince,
-  getCityByPro,
-  getDistrictByCity,
-  tenantsDetail,
-  tenantsSave
-} from '@/api/tenants.js'
-import moment from 'moment'
+import { STable, VSelect } from '@/components';
+import { getProvince, getCityByPro, getDistrictByCity, tenantsDetail, tenantsSave } from '@/api/tenants.js';
+import moment from 'moment';
 export default {
   name: 'TenantsModal',
   components: {
@@ -229,20 +149,20 @@ export default {
     }
   },
   watch: {
-    visible (newValue, oldValue) {
-      this.isshow = newValue
+    visible(newValue, oldValue) {
+      this.isshow = newValue;
     },
-    isshow (newValue, oldValue) {
+    isshow(newValue, oldValue) {
       if (newValue) {
-		  if (this.itemId) {
-			  this.getDetail(this.itemId)
-		  }
+        if (this.itemId) {
+          this.getDetail(this.itemId);
+        }
       } else {
-        this.cancel()
+        this.cancel();
       }
     }
   },
-  data () {
+  data() {
     return {
       moment,
       isshow: this.visible,
@@ -265,27 +185,26 @@ export default {
         addrDistrict: undefined,
         addrDetail: '' // 详细地址
       }
-
-    }
+    };
   },
   computed: {
-    titleText () {
-      return this.itemId ? '编辑' : '新增'
+    titleText() {
+      return this.itemId ? '编辑' : '新增';
     }
   },
-  mounted () {
-  	this.getProvinceList()
+  mounted() {
+    this.getProvinceList();
   },
   methods: {
-    cancel (e) {
-      this.clear()
-      this.$emit('close')
+    cancel(e) {
+      this.clear();
+      this.$emit('close');
     },
     // 不可选日期 今天以前日期不可选
-    disabledDate (current) {
-	  return current && current.valueOf() < Date.now() - 86400000
+    disabledDate(current) {
+      return current && current.valueOf() < Date.now() - 86400000;
     },
-    pageInit () {
+    pageInit() {
       this.formData = {
         name: '', // 企业名称
         bizCode: '', // 企业编码
@@ -298,178 +217,181 @@ export default {
         addrCity: undefined,
         addrDistrict: undefined,
         addrDetail: '' // 详细地址
-      }
+      };
     },
     // 查详情
-    getDetail (id) {
+    getDetail(id) {
       tenantsDetail({ id: id }).then(res => {
-		  // console.log(res, 'rrrrrrr')
+        // console.log(res, 'rrrrrrr')
         if (res.status == 200) {
-          this.formData = Object.assign(this.formData, res.data)
-          const now = moment().add(7, 'day').format('YYYY-MM-DD')
-          const expireDate = moment(now, 'YYYY-MM-DD')
-          this.formData.expireDate = this.formData.expireDate ? moment(this.formData.expireDate, 'YYYY-MM-DD') : expireDate
-          this.form.setFields({ 'formData.expireDate': { value: this.formData.expireDate, errors: '' } })
-          this.formData.status = Number(this.formData.status)
-          console.log(this.formData, 'this.formData')
+          this.formData = Object.assign(this.formData, res.data);
+          const now = moment().add(7, 'day').format('YYYY-MM-DD');
+          const expireDate = moment(now, 'YYYY-MM-DD');
+          this.formData.expireDate = this.formData.expireDate ? moment(this.formData.expireDate, 'YYYY-MM-DD') : expireDate;
+          this.form.setFields({ 'formData.expireDate': { value: this.formData.expireDate, errors: '' } });
+          this.formData.status = Number(this.formData.status);
+          console.log(this.formData, 'this.formData');
         }
-      })
+      });
     },
     // 获取省列表'
-    getProvinceList () {
+    getProvinceList() {
       getProvince().then(res => {
-		  // console.log(res, 'rrrrrrr')
+        // console.log(res, 'rrrrrrr')
         if (res.status == 200) {
-          this.addrProvinceList = res.data || []
+          this.addrProvinceList = res.data || [];
         } else {
-          this.addrProvinceList = []
+          this.addrProvinceList = [];
         }
-      })
+      });
     },
     // 获取城市列表
-    getCityList (val) {
-      this.addrCityList = []
-      this.addrDistrictList = []
-	  this.form.setFields({ 'formData.addrCity': { value: undefined, errors: '' } })
-	  this.form.setFields({ 'formData.addrDistrict': { value: undefined, errors: '' } })
-	  this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } })
-	  this.getCityListRequest(val)
+    getCityList(val) {
+      this.addrCityList = [];
+      this.addrDistrictList = [];
+      this.form.setFields({ 'formData.addrCity': { value: undefined, errors: '' } });
+      this.form.setFields({ 'formData.addrDistrict': { value: undefined, errors: '' } });
+      this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } });
+      this.getCityListRequest(val);
     },
-    getCityListRequest (val) {
+    getCityListRequest(val) {
       getCityByPro({
         id: val
       }).then(res => {
         if (res.status == 200) {
-          this.addrCityList = res.data || []
+          this.addrCityList = res.data || [];
         } else {
-          this.addrCityList = []
+          this.addrCityList = [];
         }
-      })
+      });
     },
     // 获取区县列表
-    getAreaList (val) {
-      this.addrDistrictList = []
-	  this.form.setFields({ 'formData.addrDistrict': { value: undefined, errors: '' } })
-	  this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } })
-	  this.getAreaListRequest(val)
+    getAreaList(val) {
+      this.addrDistrictList = [];
+      this.form.setFields({ 'formData.addrDistrict': { value: undefined, errors: '' } });
+      this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } });
+      this.getAreaListRequest(val);
     },
-    getAreaListRequest (val) {
+    getAreaListRequest(val) {
       getDistrictByCity({
         id: val
       }).then(res => {
         if (res.status == 200) {
-          this.addrDistrictList = res.data || []
+          this.addrDistrictList = res.data || [];
         } else {
-          this.addrDistrictList = []
+          this.addrDistrictList = [];
         }
-      })
+      });
     },
     // 区县变更
-    areaCharged (val) {
-      this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } })
+    areaCharged(val) {
+      this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } });
     },
     // 有效期改变
-    expireDateChange (v) {
-      console.log(v)
+    expireDateChange(v) {
+      console.log(v);
       this.form.setFields({
         'formData.expireDate': {
           value: v,
           errors: ''
         }
-      })
+      });
     },
     // 使用权限改变
-    scopeTypeChange (v) {
-      this.form.setFields({ 'formData.scopeType': { value: v, errors: '' } })
+    scopeTypeChange(v) {
+      this.form.setFields({ 'formData.scopeType': { value: v, errors: '' } });
     },
     // 启用状态切换
-    onStatusChange (v) {
-      console.log(v, 'vvvvvvvvvv')
-      this.formData.status = v
+    onStatusChange(v) {
+      console.log(v, 'vvvvvvvvvv');
+      this.formData.status = v;
     },
     // 快捷时间处理
-    timeFilter (time) {
-      const now = moment().add(time, 'day').format('YYYY-MM-DD')
+    timeFilter(time) {
+      const now = moment()
+        .add(time, 'day')
+        .format('YYYY-MM-DD');
       this.form.setFields({
         'formData.expireDate': {
           value: moment(now, 'YYYY-MM-DD'),
           errors: ''
         }
-      })
+      });
     },
-
     // 保存提交
-    handleSubmit () {
-      const _this = this
+    handleSubmit() {
+      const _this = this;
       this.form.validateFields((err, values) => {
         if (!err) {
-          console.log(values.formData, ' formData.type222222222')
-          const params = this.itemId ? Object.assign({
-            id: this.itemId
-          }, values.formData) : values.formData
-          params.expireDate = moment(params.expireDate).format('YYYY-MM-DD')
-          console.log(params, 'ppppppppppppp')
+          const params = this.itemId
+            ? Object.assign(
+                {
+                  id: this.itemId
+                },
+                values.formData
+              )
+            : values.formData;
+          params.expireDate = moment(params.expireDate).format('YYYY-MM-DD');
           tenantsSave(params).then(res => {
-            console.log(res, 'res--save')
+            console.log(res, 'res--save');
             if (res.status + '' === '200') {
-              this.$message.success(res.message ? res.message : '保存成功')
-              this.$emit('refresh')
-              setTimeout(function () {
-                _this.cancel()
-              }, 300)
+              this.$message.success(res.message ? res.message : '保存成功');
+              this.$emit('refresh');
+              setTimeout(function() {
+                _this.cancel();
+              }, 300);
             } else {
-              this.$message.error(res.message)
+              // this.$message.error(res.message);
             }
-          })
+          });
         }
-      })
+      });
     },
     // 取消
-    handleCancel () {
-      const _this = this
+    handleCancel() {
+      const _this = this;
       this.$confirm({
         title: '提示',
         content: '确定取消吗?',
         okText: '确定',
         cancelText: '取消',
-        onOk () {
-          _this.clear()
-          _this.cancel()
+        onOk() {
+          _this.clear();
+          _this.cancel();
         }
-      })
+      });
     },
-    clear () {
-      this.form.resetFields()
-	  this.pageInit()
+    clear() {
+      this.form.resetFields();
+      this.pageInit();
     }
-
   },
-  beforeCreate () {
+  beforeCreate() {
     this.form = this.$form.createForm(this, {
       name: 'tenantsModal'
-    })
+    });
   }
-
-}
+};
 </script>
 
 <style>
-	.modalBox {}
+.modalBox {
+}
 
-	.ant-modal-footer {
-		display: none;
-	}
+.ant-modal-footer {
+  display: none;
+}
 
-	.time-text {
-		color: #1890FF;
-		padding: 0px 20px;
-		cursor: pointer;
-	}
+.time-text {
+  color: #1890ff;
+  padding: 0px 20px;
+  cursor: pointer;
+}
 
-	.labelT {
-		position: absolute;
-		left: -135px;
-		top: 20px;
-		color: rgba(0, 0, 0, 0.85);
-	}
+.labelT {
+  position: absolute;
+  left: -135px;
+  top: 20px;
+  color: rgba(0, 0, 0, 0.85);
+}
 </style>

+ 2 - 1
vue.config.js

@@ -108,7 +108,8 @@ const vueConfig = {
     // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
     proxy: {
       '/api': {
-        target: 'http://192.168.16.100:9102/at-it/',
+        // target: 'http://192.168.16.100:9102/at-it/',
+        target: 'https://aitour-it.test.zyucgj.com/at-it',
         ws: false,
         changeOrigin: true,
         pathRewrite: {