分类 代码 下的文章

vue - web 调用摄像头进行拍照

List.vue

<template>
  <!--人像采集-->
  <div class="typt-list-container">
    <div>人像采集</div>
    <img v-if="image" :src="image" class="border" style="width: 200px;height: 200px;"/>
    <el-button @click="openCamera">打开摄像头</el-button>
    <el-dialog :visible.sync="cameraVisible"
               class="passport-imgDialog"
               :before-close="closeCamera"
               width="800px"
               :show-close="true"
               style="padding: 0;"
               title="人像采集"
               :close-on-click-modal="false">
      <div style="height: 400px;text-align: center;" v-if="cameraHack">
        <Photograph :image="image"
                    :statusInfo="statusInfo"
                    @getPhoto="getPhoto"></Photograph>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import gateCamera from '../../../assets/acms/mixins/gateCamera/index.js'
import Photograph from '../../../components/acms/Photograph'
import { MsgShow } from '../../../assets/acms/js/Message'
export default {
  components: {
    Photograph
  },
  mixins: [gateCamera],
  data () {
    return {
      cameraVisible: false,
      cameraHack: false,
      image: '', // 传递图像数据
      statusInfo: { // 状态显示
        status: '', // loading | fail
        msg: ''
      }
    }
  },
  props: ['params', 'modifyData', 'pageData', 'searchData'],
  mounted () {
  },
  methods: {
    // 获取拍照图像
    getPhoto ({ formdata, base64 }) {
      MsgShow('success', '获取中......', 2000)
      // 上传中
      this.statusInfo.status = 'loading'
      this.statusInfo.msg = '上传中'
      // 上传成功
      setTimeout(() => {
        MsgShow('success', '人像采集成功', 2000)
        this.statusInfo.status = ''
        this.statusInfo.msg = ''
        this.image = base64
        this.closeCamera()
      }, 2000)
    },
    // 打开摄像头
    openCamera () {
      this.cameraHack = false
      this.cameraVisible = false
      this.$nextTick(() => {
        this.cameraHack = true
        this.cameraVisible = true
      })
    },
    // 关闭拍照弹窗
    closeCamera () {
      this.cameraHack = false
      this.cameraVisible = false
    }
  }
}
</script>

阅读全文

vue - 在a方法中去调用b方法的返回数据

// 通过与基本信息对比判断手机号是否重复
isPhoneRepeatEd (data) {
  return new Promise((resolve, reject) => {
    let result = {}
    let param = {
      phone: data.phone
    }
    let url = '/yhacms/person/base'
    AxiosJsonApi(url, {}, 'GET', param).then(res => {
      let existsIdNo = ''
      let existsName = ''
      if (res.data) {
        existsIdNo = res.data.idNo || ''
        existsName = res.data.name || ''
      }
      if (existsIdNo !== '' && existsIdNo !== data.idNo) {
        // 说明手机号已经被使用了
        result = {
          status: 500,
          data: {
            existsIdNo: existsIdNo,
            existsName: existsName
          }
        }
      } else {
        // 说明手机号现在没人用
        result = {
          status: 200,
          data: {}
        }
      }
      resolve(result)
    })
  })
},
saveData () {
    // 业务逻辑
    //
    // 判断手机号是否已被使用
    this.isPhoneRepeatEd(data).then(data => {
        if (data.status === 500) {
          let str = this.addFormData.phone + ' 已被 ' +
            data.data.existsName + ' ' +
            data.data.existsIdNo + ' 使用!'
          MsgShow('error', str, 6000)
          return false
        } else {
          // 业务逻辑
        }
    })
}

nginx

/usr/local/nginx/conf/vhost

test

location ^~/test/{
root /home/data/;
expires 30d;
}
/usr/local/nginx/sbin/nginx -s reload

vue 调用 public 中引用的外部 js 方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="c.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

$(function () {
  console.log('这里是最外层的js')
})
var callVue = {
  closeLdb: function () {
    console.log('调用到了closeldb')
    console.log(window)
    console.log(window.external)
    window.external.CloseFlowArrangeWindow()
  }
}
function myClose() {
  console.log('外部自己的close')
}
function recvPara(type) {
  console.log(type)
  console.log(typeof type)
}

// 调用外部的关闭
CloseFlowArrangeWindow () {
  callVue.closeLdb()
}

vue.config.js - 打包的文件带上版本号

const Version = new Date().getTime() + '-2.0.0.2'
const webpack = require('webpack')
module.exports = {
  publicPath: './',
  lintOnSave: false,
  outputDir: 'dist', // 构建输出目录
  assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
  configureWebpack: {
    output: {
      filename: `js/[name].${Version}.js`,
      chunkFilename: `js/[name].${Version}.js`
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery'
      })
    ]
  },
  devServer: {
    disableHostCheck: true,
    port: 80,
    proxy: {
      '/': {
        target: 'http://192.168.8.8:8888/',
        changeOrigin: true,
        ws: false
      }
    }
  }
}

el-tree - 选中父级,子级不选中

组件

<!--
  选中父级,子级不选中
-->
<template>
    <div>
      <el-tree
        :data="data"
        :props="props"
        :check-strictly="checkStrictly"
        ref="tree"
        :node-key="nodeKey"
        @check="getCheckedKeys"
        show-checkbox
        :default-expanded-keys="Expandeds"
        :default-checked-keys="Selecteds">
      </el-tree>
    </div>
</template>
<script>
export default {
  props: {
    /* checkStrictly: {
      type: Boolean,
      default () {
        return false
      }
    }, */
    nodeKey: {
      type: String,
      default () {
        return []
      }
    },
    Selecteds: {
      type: Array,
      default () {
        return []
      }
    },
    Expandeds: {
      type: Array,
      default () {
        return []
      }
    },
    options: {
      type: Array,
      default () {
        return []
      }
    },
    // 树节点配置选项
    props: {
      type: Object,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      TreeData: [],
      AllData: [],
      flag: false,
      checkStrictly: true
    }
  },
  watch: {
    Selecteds () {
      // this.TreeData = this.Selecteds
      let that = this
      this.checkStrictly = true
      this.$nextTick(() => {
        that.TreeData = that.Selecteds
        that.$refs.tree.setCheckedKeys(that.Selecteds)
        // that.checkStrictly = false
      })
    }
  },
  computed: {
    data () {
      return this.options
    }
  },
  methods: {
    orgCheckChange (data, checked, indeterminate) {
    },
    /* 获取当前树的ID值 */
    getCheckedKeys (node, keys) {
      // console.log(node)
      // console.log(keys)
      let that = this
      this.flag = true
      // let checkedKeys = keys.checkedKeys
      // let halfChecked = keys.halfCheckedKeys
      // let checkArr = checkedKeys.concat(halfChecked)
      // this.TreeData = checkedKeys
      // this.AllData = checkArr
      this.setNode(this.$refs.tree.getNode(node.locationId))
      this.$nextTick(function () {
        that.AllData = that.$refs.tree.getCheckedKeys()
      })
    },
    // 递归设置子节点和父节点
    setNode (node) {
      if (node.checked) {
        // 如果当前是选中checkbox,则递归设置父节点和父父节点++选中
        this.setParentNode(node)
      } else {
        // 如果当前是取消选中checkbox,则递归设置子节点全部取消选中
        this.setChildNode(node)
      }
    },
    // 递归设置父节点全部选中
    setParentNode (node) {
      if (node.parent) {
        for (const key in node) {
          if (key === 'parent') {
            node[key].checked = true
            this.setParentNode(node[key])
          }
        }
      }
    },
    // 递归设置子节点全部取消选中
    setChildNode (node) {
      if (node.childNodes && node.childNodes.length) {
        node.childNodes.forEach(item => {
          item.checked = false
          this.setChildNode(item)
        })
      }
    }
  }
}
</script>

阅读全文

Vue - 强制刷新组件(销毁并重置)

<el-dialog :visible.sync="reportDialogVisible">
      <Report :reportInfo="reportInfo" v-if="hackReset"></Report>
</el-dialog>
// 声明hackReset,利用true或者false实现重建或者销毁
this.hackReset = false;// 销毁组件
this.$nextTick(() => {
    this.hackReset = true;// 重建组件
});

vue - el-form 的多层循环表单验证

html

<el-form :model="formObj" :rules="rules" ref="ruleForm">
  <el-form-item :label="'护理记录项目配置:'" label-width="180px">
    <template v-for="(formItem, index) in formObj.formDictExtendDoList">
      <div class="hljl-container" :key="formItem.id">
        <el-row>
          <el-col :span="8">
            <el-form-item
              :label="'字段名称:'"
              label-width="90px"
              :rules="rules.fieldName"
              :prop="'formDictExtendDoList.'+index+'.fieldName'"
            >
              <el-input
                v-model.trim="formItem.fieldName"
                type="text"
                :clearable="true"
                maxLength="100"
                placeholder="请输入"
              />
              <!--@blur="isRepeat(formItem, index, 'fieldName')"-->
            </el-form-item>
          </el-col>
          <template
            v-for="(child, index1) in formItem.item"
            v-show="formItem.type === 2"
          >
            <el-col :span="8" :key="child.id">
              <el-form-item
                :label="'选项' + (index1+1) + ':'"
                label-width="90px"
                :rules="rules.value"
                :prop="'formDictExtendDoList.'+index+'.item.'+index1+'.value'"
              >
                <el-input
                  v-model.trim="child.value"
                  @input="forceUpdate"
                  :clearable="true"
                  type="text"
                  maxlength="20"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </div>
    </template>
  </el-form-item>
</el-form>

js

阅读全文