Vue归纳总结笔记 1期

1.devServer proxy代理

• devServer proxy代理 注释笔记

module.exports = {
    // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
	publicPath: process.env.NODE_ENV === 'production' ? '/switchboard/' : '/',
    
    // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
    outputDir: `switchboard-1.0.0`,
    
    // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
    assetsDir: 'static',
    
    // 是否开启eslint保存检测，有效值：ture | false | 'error'
    lintOnSave: process.env.NODE_ENV === 'development',
    
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    productionSourceMap: false,
    
    // webpack-dev-server 相关配置
    devServer: {
        // https: true, // 开启https服务器
        host: 'localhost', // 目标服务器主机ip
        port: 8080, // 目标服务器主机端口号
        
        // proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
        proxy: {
            '/switchboard-web': {
                target: process.env.VUE_APP_ADDRESS,
                changeOrigin: true,
                ws: true, // 开启代理 websockets
                pathRewrite: {
                    '/switchboard-web': ''
                }
                // pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.2.224:99/xxxx
                // pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.2.224:99/api/xxxx
            }
        }    
    }
}

2.ElementUI循环生成的Form表单项添加校验规则

• el-form-item 循环数据添加校验规则

template模板代码片段

<el-form
  :inline="true"
  :model="relDistributeForm"
  class="demo-form-inline"
  label-position="right"
  label-width="75px"
  ref="relDistributeFormRef"
>
  <template v-for="(item, index) in relDistributeForm.deptUserList">
	<!-- Form表单项添加校验规则 -->
    <el-form-item
      :label="item.name"
      :prop="`deptUserList.${index}.assignNum`"
      :rules="relDistributeFormRules.assignNum"
      :key="item.userCode"
    >
      <el-input v-model="item.assignNum" placeholder=""> </el-input>
    </el-form-item>
  </template>
</el-form>

:prop="deptUserList.${index}.assignNum"，deptUserList是v-for绑定的数组，index是索引，assignNum是表单绑定v-model的每一项名称

注意：template标签v-for绑定的数组绑定数组，key属性绑定在内部的子元素里面

data里面声明

export default {
	data() {
		  var checkTags = (rule, value, callback) => {
          	if (value.trim()) {
                if (isNaN(Number(value))) {
                	return callback(new Error('请输入数字值'))
                }
                if (!/^[0-9]+?$/.test(value)) {
                  	return callback(new Error('请输入非负整数'))
                }

                let assignNumList = this.relDistributeForm.deptUserList.map((item) => 
                  	return Number(item.assignNum)
                })
                let assignNumSum = assignNumList.reduce((prev, curr) => {
                  	return prev + curr
                })
                if (assignNumSum > this.multipleSelection.length) {
                  	return callback(new Error('分配超出范围'))
                }
                callback()
          	}
    	}
	}
}

3.ElementUI表单里面循环校验子组件项el-form-item

• el-form-item 循环数据添加校验规则

template模板代码片段

<el-form
  :model="editClientForm"
  :rules="editClientRules"
  ref="editClientRef"
  :disabled="editClientFormFlag"
>
	<el-row>
        <template v-for="(item, index) in editClientForm.customLebalList">
			<!-- 省略部分代码 -->
			<el-form-item
            	:label="item.fieldNameChina"
                :key="index"
                v-if="item.inputType == 4"
                label-width="100px"
                :required="item.mustFill == 1 ? true : false"          
            >
                <!-- 子组件 -->
                <AddressDetails
                      @input="handleChangeAdress"
                      :mustFill="item.mustFill"
                      :proList="`${JSON.stringify(item.proList)}`"
                      :cityList="`${JSON.stringify(item.cityList)}`"
                      :distList="`${JSON.stringify(item.distList)}`"
                      :fieldName="`${item.fieldName}`"
                      :addressValue="editClientForm[`${item.fieldName}`]"
                ></AddressDetails>
            </el-form-item>
		</template>
    </el-row>
</el-form>

引入子组件

import AddressDetails from '@/components/Address/addressDetails.vue'

data里面声明

export default {
	components: {
    	AddressDetails,
  	},
}

AddressDetails 子组件 === 省市区三级联动组件

<template>
  <div id="address">
     <!-- 子组件展示校验规则 -->
    <el-form-item
      class="form-item-inline"
      prop="province"
      :rules="editClientToInputType4Rules.province"
    >
      <el-select v-model="province" @change="changeProvince" clearable>
        <el-option
          v-for="option in JSON.parse(this.proList)"
          :value="option.name"
          :label="option.name"
          :key="option.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      class="form-item-inline"
      prop="city"
      :rules="editClientToInputType4Rules.city"
    >
      <el-select v-model="city" @change="changeCity" clearable>
        <el-option
          v-for="option in cityData"
          :value="option.name"
          :label="option.name"
          :key="option.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      class="form-item-inline"
      prop="district"
      :rules="editClientToInputType4Rules.district"
    >
      <el-select v-model="district" @change="changeDistrict" clearable>
        <el-option
          v-for="option in districtData"
          :value="option.name"
          :label="option.name"
          :key="option.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <div>
      <el-form-item
        class="form-item-inline"
        prop="inputDetailAddress"
        :rules="editClientToInputType4Rules.inputDetailAddress"
      >
        <el-input
          type="textarea"
          placeholder="请输入详细地址"
          v-model="inputDetailAddress"
          @change="hangdleInputDetailAddress"
        ></el-input>
      </el-form-item>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    fieldName: {
      //字段名
      type: String,
      required: true,
    },
    addressValue: {
      //字段值
      type: String,
      required: true,
    },
    proList: {
      type: Array,
      required: true,
    },
    cityList: {
      type: Array,
      required: true,
    },
    distList: {
      type: Array,
      required: true,
    },
    mustFill: {
      // 该字段是否是必填项
      type: Number,
      required: true,
    },
  },
  data() {
    var editClientRulesToProvince = (rule, value, callback) => {
      // console.log(this.mustFill);
      if (this.mustFill == 1 && !this.province) {
        return callback(new Error('请选择省份'))
      } else {
        callback()
      }
    }
    var editClientRulesToCity = (rule, value, callback) => {
      //  console.log("城市列表看城市",this.cityData);
      // console.log("城市列表看地区",this.districtData);
      if (this.mustFill == 1 && this.cityData.length > 0 && !this.city) {
        return callback(new Error('请选择城市'))
      } else {
        callback()
      }
    }
    var editClientRulesToDistrict = (rule, value, callback) => {
      // console.log("地区列表看地区",this.districtData);
      if (
        this.mustFill == 1 &&
        this.districtData.length > 0 &&
        !this.district
      ) {
        return callback(new Error('请选择地区'))
      } else {
        callback()
      }
    }
    var editClientRulesToInputDetailAddress = (rule, value, callback) => {
      if (this.mustFill == 1) {
        // console.log(this.inputDetailAddress.length);
        if (!this.inputDetailAddress.trim()) {
          return callback(new Error('请输入详细地址'))
        }
        if (this.inputDetailAddress.length > 150) {
          return callback(new Error('详细地址限制在 150 个字符以内'))
        }
        callback()
      } else {
        callback()
      }
    }
    return {
      province: '',
      city: '',
      district: '',
      inputDetailAddress: '',
      cityData: [],
      districtData: [],
      editClientToInputType4Rules: {
        province: [{ validator: editClientRulesToProvince, trigger: 'change' }],
        city: [{ validator: editClientRulesToCity, trigger: 'change' }],
        district: [{ validator: editClientRulesToDistrict, trigger: 'change' }],
        inputDetailAddress: [
          { validator: editClientRulesToInputDetailAddress, trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.formatAddress()
  },
  watch: {
    province: {
      handler(newValue, oldValue) {
        if (newValue) {
          // console.log(JSON.parse(this.cityList));

          this.cityData = []
          JSON.parse(this.proList).forEach((item, index) => {
            if (item.name == newValue) {
              this.cityData = JSON.parse(this.cityList).filter((ele, ind) => {
                return ele.pid == item.id
              })
            }
          })
        }
      },
    },
    city: {
      handler(newValue, oldValue) {
        if (newValue) {
          // console.log(JSON.parse(this.distList));

          this.districtData = []
          this.cityData.forEach((item, index) => {
            if (item.name == newValue) {
              this.districtData = JSON.parse(this.distList).filter(
                (ele, ind) => {
                  return ele.pid == item.id
                }
              )
            }
          })
        }
      },
    },
  },
  methods: {
    formatAddress() {
      if (this.addressValue) {
        this.inputDetailAddress = this.addressValue.split(',')[1]
        this.province = this.addressValue.split(',')[0].split('-')[0]
        this.city = this.addressValue.split(',')[0].split('-')[1]
        this.district = this.addressValue.split(',')[0].split('-')[2]
      } else {
        //不做处理
      }
    },
    changeProvince() {
      this.city = ''
      this.district = ''
      this.cityData = []
      this.districtData = []

      JSON.parse(this.proList).forEach((item, index) => {
        if (this.province == item.name) {
          this.cityData = JSON.parse(this.cityList).filter((ele, ind) => {
            return ele.pid == item.id
          })
        }
      })
      this.updateValue()
    },
    changeCity() {
      this.district = ''
      this.districtData = []

      this.cityData.forEach((item, index) => {
        if (this.city == item.name) {
          this.districtData = JSON.parse(this.distList).filter((ele, ind) => {
            return ele.pid == item.id
          })
        }
      })
      this.updateValue()
    },
    changeDistrict() {
      this.updateValue()
    },
    updateValue() {
      this.$emit('input', {
        province: this.province,
        city: this.city,
        district: this.district,
        inputDetailAddress: this.inputDetailAddress,
        fieldName: this.fieldName,
        districtData: this.districtData,
      })
    },
    hangdleInputDetailAddress() {
      this.updateValue()
    },
  },
}
</script>

<style lang="less" scoped>
#address {
  .el-textarea {
    margin-top: 20px;
    width: 500px;
  }
  .form-item-inline {
    display: inline-block;
  }
}
</style>

4.el-table 列表项按钮播放录音

• el-table 列表项按钮播放录音

template模板代码片段

<el-table
  ref="recordsListTableRef"
  v-loading="recordsListLoading"
  element-loading-text="加载中..."
  element-loading-spinner="el-icon-loading"
  :data="recordsListData"
  tooltip-effect="dark"
  style="width: 100%"
>	
    <!-- 部分代码省略 -->
    <el-table-column align="center" label="录音">
      <template slot-scope="scope">
        <div v-if="scope.row.recordFileUrl">
          <i
            v-if="scope.row.showStart"
            class="audio_paly_btn"
            @click="audioPlay(scope.row)"
            :ref="`btn.${scope.row.id}.Ref`"
            >播放</i
          >
          <i
            v-else
            class="audio_paly_btn"
            @click="audioPause(scope.row)"
            :ref="`btn.${scope.row.id}.Ref`"
            >暂停</i
          >
            
          <!-- 按钮播放 -->
          <audio
            id="audio_my"
            :ref="`audio.${scope.row.id}.Ref`"
            @ended="audioOver(scope.row)"
            @pause="audioPauseEvent(scope.row)"
            @play="audioPlayEvent(scope.row)"
          >
          </audio>
        </div>
        <div v-if="!scope.row.recordFileUrl">
          <span>--</span>
        </div>
      </template>
    </el-table-column>
</el-table>

data里面声明

export default {
    methods:{
        // 播放按钮
        audioPlay(val) {
            if (this.$refs[`audio.${val.id}.Ref`].src == '') {
              // 调用接口 部分代码省略
              getMd5Encode(val.recordFileUrl).then((res) => {
                if (res.code == 200) {
                  // console.log(res);
                  this.$refs[`audio.${val.id}.Ref`].src = res.data
                }
            })
                
             this.recordsListData.forEach((item) => {
                if (item.recordFileUrl) {
                  if (val.id == item.id) {
                    item.showStart = false
                    if (!item.showStart) {
                      this.$refs[`audio.${val.id}.Ref`].play()
                    }
                  } else {
                    item.showStart = true
                    this.$refs[`audio.${item.id}.Ref`].pause()
                    this.$refs[`audio.${item.id}.Ref`].currentTime = 0 //使得录音播放都重新开始
                  }
                }
              })   
        },
            
        // 暂停按钮
        audioPause(val) {
          val.showStart = true
          this.$refs[`audio.${val.id}.Ref`].pause()
          // this.audioObj.pause()
        },
            
         // 播放完事件
        audioOver(val) {
          val.showStart = true
        },
            
        //暂停事件
        audioPauseEvent(val) {
          val.showStart = true
        },
            
        // 播放事件
        audioPlayEvent(val) {
          val.showStart = false
        },   
    }
}

2021.04.30

待补…