telephone-clients 3.0.103-7 → 3.0.103-8

package/src/components/pc/dataManager/Materials.vue

@@ -1,553 +1,553 @@
-<template>
-  <!-- 素材包含三种类型，图片，视频，语音，图片和视频都包含缩略图，界面只显示缩略图，点开后显示原图 -->
-  <div class="row bg-white p-10">
-    <!-- 类型选择 -->
-    <div class="col-sm-3" style="overflow: auto;display: flex;flex-direction: column;border-right: 2px solid #f8f8f8;padding-right: 10px;">
-      <div class="auto" v-for="type in types" style="padding-left: 5px;margin-top: 5px;">
-        <input class="magic-checkbox" type="checkbox" :value="type.type" :id="check+$index" v-model="selects">
-        <label :for="check+$index">{{type.type}}</label>
-      </div>
-      <!-- 添加类型 -->
-      <!-- <div class="add-content" @click="add('type')" v-show="isAdd" id="mateials-add-type" v-if="useType === 'manager'">
-        <i class="add-content-icon"><span class="glyphicon glyphicon-plus"></span></i>
-      </div> -->
-    </div>
-    <!-- 对应类型得素材 -->
-    <div class="col-sm-9" style="padding: 10px;overflow: auto;" >
-      <div class="rwo">
-
-        <!--素材缩略图+列表-->
-        <div class="auto col-sm-6"  v-for="row in contents" style="padding: 8px;">
-          <div class="img-card ">
-            <!-- 上部显示缩略图 -->
-            <div class="cut-img">
-              <img :src="$androidUtil.getProxyUrl() + '/weixin/image/material/'+row.f_thumbnail" v-if="!(row.f_file_type === 'voice')" class="img-responsive" @click="showImgea(row)">
-              <div alt="" class="play-icon" @click="palyVideo(row)" v-if="row.f_file_type === 'video'"></div>
-              <div style="margin-top: 300px" v-if="row.f_file_type === 'voice'">
-                <audio :src="src" v-el:audio controls @click="palyAudio(row)"></audio>
-              </div>
-              <!--<img class="play-icon" alt=""  @click="palyAudio(row)" v-if="row.f_file_type === 'voice'">-->
-            </div>
-
-            <!-- 描述 -->
-            <div class="flex">
-              <div class="card-des-lines" :title="row.f_describe">{{row.f_describe}}</div>
-              <!-- 简单信息 -->
-              <div class="row">
-                <div class="col-sm-7 text-between">
-                  <span class="card-des-line" :title="row.f_des_simple">{{row.f_des_simple}}</span>
-                  <span>{{row.f_file_type === 'image' ? '图片' : row.f_file_type === 'video'? '视频' :'音频'}}</span>
-                </div>
-                <div class="col-sm-5 text-right"  style="padding-left: 5px;margin-top: 5px;" v-if="!(useType === 'manager')">
-                  <input class="magic-checkbox" type="checkbox" :value="row" :id="'metertitle-res-'+$index" v-model="rows">
-                  <label :for="'metertitle-res-'+$index"></label>
-                </div>
-                <div  class="col-sm-5 text-right" v-if="useType === 'manager'">
-                  <button type="button" name="button" class="btn btn-link" @click="modify(row, $index)">修改</button>
-                  <button type="button" name="button" class="btn btn-link" @click="deleteRow(row, $index)">删除</button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 添加素材 -->
-        <div class="add-content" @click="add('mater')" id="mateials-add-mater" v-if="useType === 'manager'">
-          <i class="add-content-icon"><span class="glyphicon glyphicon-plus"></span></i>
-        </div>
-      </div>
-    </div>
-
-    <div style="position: fixed; z-index: 9999; left:0px; right:0px; top: 0px; bottom:0px;" v-if="videoShow">
-      <video-player :current-video="src" @player-closed="this.videoShow=false">
-      </video-player>
-    </div>
-
-
-    <div class="full-img" v-if="showImg" >
-      <img :src="src" alt="" id="imgstate" :alt="alt || ''">
-      <div class="btns">
-        <button type="button" name="button" class="btn btn-primary" @click="enlarge()" :id="'vc-imgself-enlarge-'+attach">放大</button>
-        <button type="button" name="button" class="btn btn-primary" @click="reduce()" :id="'vc-imgself-reduce-'+attach">缩小</button>
-        <button type="button" name="button" class="btn btn-primary" @click="leftRevolve()" :id="'vc-imgself-leftRevolve-'+attach">向左旋转</button>
-        <button type="button" name="button" class="btn btn-primary" @click="rightRevolve()" :id="'vc-imgself-rightRevolve-'+attach">向右旋转</button>
-        <button type="button" name="button" class="btn btn-primary" @click="close()" :id="'vc-imgself-close-'+attach">关闭</button>
-      </div>
-    </div>
-    <modal :show.sync="showAdd" v-ref:modal backdrop="false">
-      <header slot="modal-header" class="modal-header">
-        <button type="button" class="close" @click="closeModal"><span>&times;</span></button>
-        <h4 class="modal-title">{{this.row ? '修改' : '添加'}}{{addType === 'type' ? '类型' : '资源'}}</h4>
-      </header>
-      <article slot="modal-body" class="modal-body select-overspread" v-if="addType === 'mater' || addType === 'modify'">
-        <div class="select-overspread form-horizontal auto workOrderInfo">
-          <div class="row roee">
-            <div class="col-sm-12 form-group form-input-group" v-if="addType === 'mater'">
-              <label class="font_normal_body"  style="width: 10%">选择文件</label>
-              <input type="file" class="form-control" v-el:materfile>
-            </div>
-            <div class="col-sm-12 form-group form-input-group" v-if="addType === 'mater'">
-              <label class="font_normal_body"  style="width: 10%">类型</label>
-              <input v-model="des_type" type="text" class="form-control" />
-              <!-- <v-select :value.sync="des_type"
-                  :options='mater_types' placeholder='选择素材类型'
-                  close-on-select></v-select> -->
-            </div>
-            <div class="col-sm-12 form-group form-input-group" v-if="addType === 'mater'">
-              <label class="font_normal_body"  style="width: 10%">文件简述</label>
-              <input v-model="des_simple" type="text" class="form-control"/>
-            </div>
-            <div class="col-sm-12 form-input-group" v-if="addType === 'mater'">
-              <label class="font_normal_body"  style="width: 10%">详细说明</label>
-              <textarea name="name" rows="8" class="form-control ver-textarea"
-                        v-model="describe"></textarea>
-            </div>
-          </div>
-        </div>
-      </article>
-      <article slot="modal-body" class="modal-body" v-if="addType === 'type'">
-        <div class="select-overspread form-horizontal auto workOrderInfo">
-          <div class="row roee">
-            <div class="form-group">
-              <label class="col-sm-12 form-group form-input-group" style="width: 8%">输入添加类型</label>
-              <input type="text" class="form-control" v-model="newType" @keyup.enter="confirm()">
-            </div>
-          </div>
-        </div>
-      </article>
-
-      <footer slot="modal-footer" class="modal-footer">
-        <!-- <button v-show="show" type="button" class="btn btn-default" @click='close'>取消</button> -->
-        <button type="button" name="button"
-                class="button_search button_spacing" @click='confirm()'>保存</button>
-      </footer>
-    </modal>
-  </div>
-</template>
-
-<script>
-import $ from 'jquery'
-import { HttpResetClass } from 'vue-client'
-import co from 'co'
-
-// 删除素材，并从库中将素材信息删除
-let deleGen = function * (self, row) { // /rs/materials/upload/image
-  let res = yield self.$resetpost(`${self.$androidUtil.getProxyUrl()}/weixin/del/${row.f_mediaid}/${self.f_fengongsi}`, {}, {resolveMsg: null, rejectMsg: null})
-  // //tag
-  if (res.data.code === 200) {
-    //tag
-    //删除素材表中的素材
-    let res = yield self.$resetdelete(`${self.$androidUtil.getProxyUrl()}/rs/entity/t_materials`, row, {warnMsg: null, resolveMsg: '删除成功！', rejectMsg: '删除失败'})
-    //tag
-    if(res.data === 'ok'){
-      //删除中间表中素材
-      let res = yield self.$resetpost(`${self.$androidUtil.getProxyUrl()}/rs/logic/deleteKlcatalogMaterials`,row,{warnMsg: null, resolveMsg: '知识素材删除成功！', rejectMsg: '知识素材删除失败'})
-    }
-  } else {
-    self.$showAlert('素材删除失败', 'danger', 0)
-  }
-  // 将类型和素材统一刷新
-  self.getTypes()
-}
-export default {
-  title: '素材合集',
-  data () {
-    return {
-      isAdd: true,
-      videoShow: false,//是否播放视频
-      audioShow: false,
-      selects: [],
-      file: null, // 素材文件
-      src: '', // 资源路径
-      src_img: '', // 缩略图路径
-      showImg: false, // 是否全屏显示图片
-      showAdd: false, // 是否显示添加模态框
-      addType: '', // 新加内容类型，包含类型，和资源两种
-      newType: '', // 新添加得类型
-      des_type: '', // 资源类型
-      des_simple: '', // 资源简述
-      f_fengongsi:'',
-      row: null, // 修改项
-      rows: [], // 使用发送的数组
-      describe: '', // 上传资源得描述
-      power: 1, // 原图放大缩小使用
-      deg: 0, // 原图放大缩小使用
-      types: [
-        // {type: '卡表故障'},
-        // {type: '打不着火'},
-        // {type: '热水器不热'},
-        // {type: '插座接触不良'}
-      ],
-      mater_types: [
-        {label: '图片', value: 'image'},
-        {label: '视频', value: 'video'},
-      ],
-      condition:'',
-      contents: [
-        // {type: 'image', src: '/materials/tupian.jpg', src_img: '/materials/tupian.jpg',
-        // describe: `这是一段描述文字，他所描述得是什么呢，message 属性虽然支持传入 HTML 片段，
-        // 但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。因此在
-        // dangerouslyUseHTMLString 打开的情况下，请确保 message 的内容是可信的，永远不要将用户提交的内容赋值给 message 属性。`,
-        // des_type: '图片', des_simple: '这是一个图片的简述'},
-        // {type: 'video', src: '/materials/shipin1.mp4', src_img: '/materials/shipinst1.jpg',
-        // describe: `这是一段描述文字，他所描述得是什么呢，message 属性虽然支持传入 HTML 片段，
-        // 但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。因此在
-        // dangerouslyUseHTMLString 打开的情况下，请确保 message 的内容是可信的，永远不要将用户提交的内容赋值给 message 属性。`,
-        // des_type: '图片', des_simple: '这是一个视频的简述'},
-      ]
-    }
-  },
-  props: {
-    useType: {
-      type: String,
-      default: 'manager'
-    },
-    //checkbox多选框id
-    check:{
-      type: String,
-      default: 'self'
-    }
-  },
-  ready () {
-    this.f_fengongsi=this.$appdata.getSingleValue("分公司") || ""
-    // 获取所有的类型
-    this.getTypes()
-  },
-  methods: {
-    // 获取素材类型
-    getTypes () {
-      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {data: {items: 'DISTINCT f_failure_type', tablename: 't_materials',
-      condition: '1=1', orderitem: 'f_failure_type'}}, {resolveMsg: null, rejectMsg: null}).then((res) => {
-        this.types = []
-        res.data.forEach((item) => {
-          this.types.push({type: item.f_failure_type})
-        })
-        // 如果没有选择就将第一个类型放入，表示始终有一个类型在显示
-        if (this.selects.length === 0) {
-          this.selects.push(this.types[0].type)
-        }
-        this.getMaters()
-      })
-    },
-    // 获取勾选类型下的素材
-    getMaters () {
-      let incon = ''
-      this.selects.forEach((item) => {
-        incon += `'${item}',`
-      })
-      incon = incon.substring(0, incon.length-1)
-      if(incon === ''){
-        this.condition = '1=1'
-      }else{
-        this.condition =`f_failure_type in (${incon})`
-      }
-      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable`, {data: {items: '*', tablename: 't_materials',
-      condition:this.condition , orderitem: 'f_failure_type'}}, {resolveMsg: null, rejectMsg: null}).then((res) => {
-        this.contents = res.data
-      })
-    },
-    add (type) {
-      this.showAdd = true
-      this.addType = type
-    },
-    closeModal () {
-      this.showAdd = false
-      this.addType = ''
-      this.newType = ''
-      this.des_type = ''
-      this.des_simple = ''
-      this.describe = ''
-      this.row = null
-    },
-    // 显示图片
-    showImgea (row) {
-      this.showImg = true
-      this.src = `${this.$androidUtil.getProxyUrl()}/weixin/image/material/${row.f_mediaid}/${this.f_fengongsi}`
-    },
-    close () {
-      this.showImg = false
-      this.src = ''
-    },
-    enlarge () {
-      // //tag
-      if (this.power <= 5) {
-        this.power += 0.5
-        this.imgState()
-      }
-    },
-    reduce () {
-      // //tag
-      if (this.power > 0.5) {
-        this.power -= 0.5
-        this.imgState()
-      }
-    },
-    leftRevolve () {
-      // //tag
-      this.deg -= 90
-      this.imgState()
-    },
-    rightRevolve () {
-      // //tag
-      this.deg += 90
-      this.imgState()
-    },
-    imgState () {
-      $('#imgstate').css({
-        'transform': 'rotate(' + this.deg + 'deg) scale(' + this.power + ' ,' + this.power + ')'
-      })
-    },
-    // 全屏播放视频
-    palyVideo (row) {
-      // 先给资源路径
-      new HttpResetClass().load("post",`/weixin/material/${row.f_mediaid}/${this.f_fengongsi}`).then(res=>{
-        if(res.data){
-          this.src = res.data.down_url
-          this.src_img = `${this.$androidUtil.getProxyUrl()}/weixin/image/material/${row.f_thumbnail}`
-          this.$nextTick(() => {
-              this.videoShow = true
-            })
-        }
-      })
-    },
-    palyAudio (row) {
-      new HttpResetClass().load("post",`/weixin/material/${row.f_mediaid}/${this.f_fengongsi}`).then(res=>{
-        if(res.data){
-          this.src = res.data.down_url
-          this.src_img = `${this.$androidUtil.getProxyUrl()}/weixin/image/material/${row.f_thumbnail}`
-          this.$nextTick(() => {
-            this.audioShow = true
-          })
-        }
-      })
-    },
-    // 保存添加
-    confirm () {
-      // 如果row存在，表示修改
-      if (this.row) {
-        this.addMater()
-        return
-      }
-      // 修改资源类型
-      if (this.addType === 'modify') {
-      } else { // 添加资源
-        let that = this
-        var form = new FormData()
-        var xhr = new XMLHttpRequest()
-        form.append('Content-Type', 'multipart-form')
-        let file = this.$els.materfile.files
-        //tag
-        //tag
-        this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable`, {data: {items: '*', tablename: 't_materials',
-            condition:`f_file_name='${file[0].name}'`, orderitem: 'f_failure_type'}}, {resolveMsg: null, rejectMsg: null}).then((res) => {
-              //tag
-          if(res.data.length !=0){
-            that.$showAlert('该文件已存在', 'danger', 0)
-          }else{
-            form.append('file', file[0])
-            xhr.onload = function () {
-              //tag
-              if (this.status === 200) {
-                //tag
-                let data = JSON.parse(this.responseText)
-                if (data.code === 200) {
-                  that.addMater(data)
-                }
-              } else {
-                that.$showAlert('素材上传失败', 'danger', 0)
-              }
-            }
-            let type
-            //tag
-            if(/image\/\w+/.test(file[0].type)){
-              type = 'image'
-            }else if(/audio\/\w+/.test(file[0].type)){
-              type = 'voice'
-            }
-            else if (/video\/\w+/.test(file[0].type)) {
-              type = 'video'
-            }
-            let url = `${this.$androidUtil.getProxyUrl()}/weixin/upload/${type}/${this.f_fengongsi}`
-            xhr.open('POST', url, true)
-            // xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
-            xhr.send(form)
-          }
-        })
-      }
-    },
-    // 拿到素材返回的id将素材存到数据库中
-    addMater (obj) {
-      let data = {}
-      // 如果有row说明为修改
-      if (this.row && !obj) {
-        data = {
-          id: this.row.id,
-          f_failure_type: this.des_type,
-          f_des_simple: this.des_simple,
-          f_describe: this.describe
-        }
-      } else {
-        data = {
-          f_file_name: obj.fileName,
-          f_file_type: obj.msgType,
-          f_thumbnail: obj.thumbnail,
-          f_mediaid: obj.mediaId,
-          f_failure_type: this.des_type,
-          f_des_simple: this.des_simple,
-          f_describe: this.describe
-        }
-      }
-      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/entity/t_materials`, data, {resolveMsg: '素材上传成功', rejectMsg: '素材上传失败'}).then((res) => {
-        // //tag
-        // 上传并保存成功后，清除所有的输入
-        this.des_type = ''
-        this.des_simple = ''
-        this.describe = ''
-        // 只在添加资源时清空文件输入框
-        // if (this.addType === 'mater') {
-        //   //tag
-        //   this.$els.materfile.outerHTML = this.$els.materfile.outerHTML
-        // }
-        // 如果时修改的话，要将修改内容清空一下，刷新界面
-        if (this.row) {
-          this.row = null
-        }
-        // 整体刷新
-        this.getTypes()
-        // 模态框消失
-        this.showAdd = false
-        //tag
-      })
-    },
-    modify (row, index) {
-      this.row = row
-      this.showAdd = true
-      this.addType = 'modify'
-      this.des_type = row.f_failure_type
-      this.des_simple = row.f_des_simple
-      this.describe = row.f_describe
-    },
-    deleteRow (row, index) {
-      this.$showMessage('删除后不可恢复，确认删除吗？', ['confirm', 'cancel']).then((res) => {
-        if (res === 'confirm') {
-          let gen = deleGen(this, row)
-          co(gen)
-        }
-      })
-    },
-    // 清空选择项
-    clearRows () {
-      this.rows = []
-    },
-  },
-  watch: {
-    'selects.length' (val) {
-      this.getMaters()
-    }
-  }
-}
-</script>
-<style media="screen">
-.workOrderInfo .roee label {
-  display: inline-block;
-  height: 100%;
-  min-width: 100px;
-  text-align: justify;
-  text-align-last: justify;
-}
-.add-content {
-  display: flex;
-  background: #f8f8f8;
-  border: 2px dashed #e0e0e0;
-  border-radius: 5px;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: auto;
-  cursor: pointer;
-}
-.add-content-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 100%;
-  max-height: 50px;
-  text-align: center;
-}
-.img-card {
-  border: 1px solid #F8F8F8;
-  padding: 8px;
-  margin: 8px;
-}
-.card-des-line {
-  height: auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.card-des-lines {
-  margin-bottom: 5px;
-  height: 60px;
-  word-break: break-all;
-  text-overflow: ellipsis;
-  display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
-  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-  -webkit-line-clamp: 3; /** 显示的行数 **/
-  overflow: hidden;  /** 隐藏超出的内容 **/
-  color: #5A5E66;
-}
-.text-between {
-    display: flex;
-    justify-content: space-between;
-    color: #878D99;
-}
-.text-between > .card-des-line {
-  flex: 1;
-}
-.img-card .magic-checkbox + label:before {
-  right: 0px;
-  left: auto;
-  margin-top: -5px;
-}
-.img-card .magic-checkbox + label:after {
-  top: -3px;
-  right: 7px;
-  left: auto;
-}
-.cut-img {
-  position: relative;
-  height: 300px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.cut-img > img {
-  height: 200px;
-}
-.play-icon {
-  position: absolute;
-  top:0;
-  width: 100%;
-  height: 100%;
-  background: black;
-  opacity: 0.5;
-  background-image: url('../../../assets/play.png');
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 50%;
-  cursor: pointer;
-}
-/*.full-img {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 20;
-  background: rgba(0,0,0,0.8);
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #fff;
-}*/
-</style>
+<template>
+  <!-- 素材包含三种类型，图片，视频，语音，图片和视频都包含缩略图，界面只显示缩略图，点开后显示原图 -->
+  <div class="row bg-white p-10">
+    <!-- 类型选择 -->
+    <div class="col-sm-3" style="overflow: auto;display: flex;flex-direction: column;border-right: 2px solid #f8f8f8;padding-right: 10px;">
+      <div class="auto" v-for="type in types" style="padding-left: 5px;margin-top: 5px;">
+        <input class="magic-checkbox" type="checkbox" :value="type.type" :id="check+$index" v-model="selects">
+        <label :for="check+$index">{{type.type}}</label>
+      </div>
+      <!-- 添加类型 -->
+      <!-- <div class="add-content" @click="add('type')" v-show="isAdd" id="mateials-add-type" v-if="useType === 'manager'">
+        <i class="add-content-icon"><span class="glyphicon glyphicon-plus"></span></i>
+      </div> -->
+    </div>
+    <!-- 对应类型得素材 -->
+    <div class="col-sm-9" style="padding: 10px;overflow: auto;" >
+      <div class="rwo">
+
+        <!--素材缩略图+列表-->
+        <div class="auto col-sm-6"  v-for="row in contents" style="padding: 8px;">
+          <div class="img-card ">
+            <!-- 上部显示缩略图 -->
+            <div class="cut-img">
+              <img :src="$androidUtil.getProxyUrl() + '/weixin/image/material/'+row.f_thumbnail" v-if="!(row.f_file_type === 'voice')" class="img-responsive" @click="showImgea(row)">
+              <div alt="" class="play-icon" @click="palyVideo(row)" v-if="row.f_file_type === 'video'"></div>
+              <div style="margin-top: 300px" v-if="row.f_file_type === 'voice'">
+                <audio :src="src" v-el:audio controls @click="palyAudio(row)"></audio>
+              </div>
+              <!--<img class="play-icon" alt=""  @click="palyAudio(row)" v-if="row.f_file_type === 'voice'">-->
+            </div>
+
+            <!-- 描述 -->
+            <div class="flex">
+              <div class="card-des-lines" :title="row.f_describe">{{row.f_describe}}</div>
+              <!-- 简单信息 -->
+              <div class="row">
+                <div class="col-sm-7 text-between">
+                  <span class="card-des-line" :title="row.f_des_simple">{{row.f_des_simple}}</span>
+                  <span>{{row.f_file_type === 'image' ? '图片' : row.f_file_type === 'video'? '视频' :'音频'}}</span>
+                </div>
+                <div class="col-sm-5 text-right"  style="padding-left: 5px;margin-top: 5px;" v-if="!(useType === 'manager')">
+                  <input class="magic-checkbox" type="checkbox" :value="row" :id="'metertitle-res-'+$index" v-model="rows">
+                  <label :for="'metertitle-res-'+$index"></label>
+                </div>
+                <div  class="col-sm-5 text-right" v-if="useType === 'manager'">
+                  <button type="button" name="button" class="btn btn-link" @click="modify(row, $index)">修改</button>
+                  <button type="button" name="button" class="btn btn-link" @click="deleteRow(row, $index)">删除</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 添加素材 -->
+        <div class="add-content" @click="add('mater')" id="mateials-add-mater" v-if="useType === 'manager'">
+          <i class="add-content-icon"><span class="glyphicon glyphicon-plus"></span></i>
+        </div>
+      </div>
+    </div>
+
+    <div style="position: fixed; z-index: 9999; left:0px; right:0px; top: 0px; bottom:0px;" v-if="videoShow">
+      <video-player :current-video="src" @player-closed="this.videoShow=false">
+      </video-player>
+    </div>
+
+
+    <div class="full-img" v-if="showImg" >
+      <img :src="src" alt="" id="imgstate" :alt="alt || ''">
+      <div class="btns">
+        <button type="button" name="button" class="btn btn-primary" @click="enlarge()" :id="'vc-imgself-enlarge-'+attach">放大</button>
+        <button type="button" name="button" class="btn btn-primary" @click="reduce()" :id="'vc-imgself-reduce-'+attach">缩小</button>
+        <button type="button" name="button" class="btn btn-primary" @click="leftRevolve()" :id="'vc-imgself-leftRevolve-'+attach">向左旋转</button>
+        <button type="button" name="button" class="btn btn-primary" @click="rightRevolve()" :id="'vc-imgself-rightRevolve-'+attach">向右旋转</button>
+        <button type="button" name="button" class="btn btn-primary" @click="close()" :id="'vc-imgself-close-'+attach">关闭</button>
+      </div>
+    </div>
+    <modal :show.sync="showAdd" v-ref:modal backdrop="false">
+      <header slot="modal-header" class="modal-header">
+        <button type="button" class="close" @click="closeModal"><span>&times;</span></button>
+        <h4 class="modal-title">{{this.row ? '修改' : '添加'}}{{addType === 'type' ? '类型' : '资源'}}</h4>
+      </header>
+      <article slot="modal-body" class="modal-body select-overspread" v-if="addType === 'mater' || addType === 'modify'">
+        <div class="select-overspread form-horizontal auto workOrderInfo">
+          <div class="row roee">
+            <div class="col-sm-12 form-group form-input-group" v-if="addType === 'mater'">
+              <label class="font_normal_body"  style="width: 10%">选择文件</label>
+              <input type="file" class="form-control" v-el:materfile>
+            </div>
+            <div class="col-sm-12 form-group form-input-group" v-if="addType === 'mater'">
+              <label class="font_normal_body"  style="width: 10%">类型</label>
+              <input v-model="des_type" type="text" class="form-control" />
+              <!-- <v-select :value.sync="des_type"
+                  :options='mater_types' placeholder='选择素材类型'
+                  close-on-select></v-select> -->
+            </div>
+            <div class="col-sm-12 form-group form-input-group" v-if="addType === 'mater'">
+              <label class="font_normal_body"  style="width: 10%">文件简述</label>
+              <input v-model="des_simple" type="text" class="form-control"/>
+            </div>
+            <div class="col-sm-12 form-input-group" v-if="addType === 'mater'">
+              <label class="font_normal_body"  style="width: 10%">详细说明</label>
+              <textarea name="name" rows="8" class="form-control ver-textarea"
+                        v-model="describe"></textarea>
+            </div>
+          </div>
+        </div>
+      </article>
+      <article slot="modal-body" class="modal-body" v-if="addType === 'type'">
+        <div class="select-overspread form-horizontal auto workOrderInfo">
+          <div class="row roee">
+            <div class="form-group">
+              <label class="col-sm-12 form-group form-input-group" style="width: 8%">输入添加类型</label>
+              <input type="text" class="form-control" v-model="newType" @keyup.enter="confirm()">
+            </div>
+          </div>
+        </div>
+      </article>
+
+      <footer slot="modal-footer" class="modal-footer">
+        <!-- <button v-show="show" type="button" class="btn btn-default" @click='close'>取消</button> -->
+        <button type="button" name="button"
+                class="button_search button_spacing" @click='confirm()'>保存</button>
+      </footer>
+    </modal>
+  </div>
+</template>
+
+<script>
+import $ from 'jquery'
+import { HttpResetClass } from 'vue-client'
+import co from 'co'
+
+// 删除素材，并从库中将素材信息删除
+let deleGen = function * (self, row) { // /rs/materials/upload/image
+  let res = yield self.$resetpost(`${self.$androidUtil.getProxyUrl()}/weixin/del/${row.f_mediaid}/${self.f_fengongsi}`, {}, {resolveMsg: null, rejectMsg: null})
+  // //tag
+  if (res.data.code === 200) {
+    //tag
+    //删除素材表中的素材
+    let res = yield self.$resetdelete(`${self.$androidUtil.getProxyUrl()}/rs/entity/t_materials`, row, {warnMsg: null, resolveMsg: '删除成功！', rejectMsg: '删除失败'})
+    //tag
+    if(res.data === 'ok'){
+      //删除中间表中素材
+      let res = yield self.$resetpost(`${self.$androidUtil.getProxyUrl()}/rs/logic/deleteKlcatalogMaterials`,row,{warnMsg: null, resolveMsg: '知识素材删除成功！', rejectMsg: '知识素材删除失败'})
+    }
+  } else {
+    self.$showAlert('素材删除失败', 'danger', 0)
+  }
+  // 将类型和素材统一刷新
+  self.getTypes()
+}
+export default {
+  title: '素材合集',
+  data () {
+    return {
+      isAdd: true,
+      videoShow: false,//是否播放视频
+      audioShow: false,
+      selects: [],
+      file: null, // 素材文件
+      src: '', // 资源路径
+      src_img: '', // 缩略图路径
+      showImg: false, // 是否全屏显示图片
+      showAdd: false, // 是否显示添加模态框
+      addType: '', // 新加内容类型，包含类型，和资源两种
+      newType: '', // 新添加得类型
+      des_type: '', // 资源类型
+      des_simple: '', // 资源简述
+      f_fengongsi:'',
+      row: null, // 修改项
+      rows: [], // 使用发送的数组
+      describe: '', // 上传资源得描述
+      power: 1, // 原图放大缩小使用
+      deg: 0, // 原图放大缩小使用
+      types: [
+        // {type: '卡表故障'},
+        // {type: '打不着火'},
+        // {type: '热水器不热'},
+        // {type: '插座接触不良'}
+      ],
+      mater_types: [
+        {label: '图片', value: 'image'},
+        {label: '视频', value: 'video'},
+      ],
+      condition:'',
+      contents: [
+        // {type: 'image', src: '/materials/tupian.jpg', src_img: '/materials/tupian.jpg',
+        // describe: `这是一段描述文字，他所描述得是什么呢，message 属性虽然支持传入 HTML 片段，
+        // 但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。因此在
+        // dangerouslyUseHTMLString 打开的情况下，请确保 message 的内容是可信的，永远不要将用户提交的内容赋值给 message 属性。`,
+        // des_type: '图片', des_simple: '这是一个图片的简述'},
+        // {type: 'video', src: '/materials/shipin1.mp4', src_img: '/materials/shipinst1.jpg',
+        // describe: `这是一段描述文字，他所描述得是什么呢，message 属性虽然支持传入 HTML 片段，
+        // 但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。因此在
+        // dangerouslyUseHTMLString 打开的情况下，请确保 message 的内容是可信的，永远不要将用户提交的内容赋值给 message 属性。`,
+        // des_type: '图片', des_simple: '这是一个视频的简述'},
+      ]
+    }
+  },
+  props: {
+    useType: {
+      type: String,
+      default: 'manager'
+    },
+    //checkbox多选框id
+    check:{
+      type: String,
+      default: 'self'
+    }
+  },
+  ready () {
+    this.f_fengongsi=this.$appdata.getSingleValue("分公司") || ""
+    // 获取所有的类型
+    this.getTypes()
+  },
+  methods: {
+    // 获取素材类型
+    getTypes () {
+      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {data: {items: 'DISTINCT f_failure_type', tablename: 't_materials',
+      condition: '1=1', orderitem: 'f_failure_type'}}, {resolveMsg: null, rejectMsg: null}).then((res) => {
+        this.types = []
+        res.data.forEach((item) => {
+          this.types.push({type: item.f_failure_type})
+        })
+        // 如果没有选择就将第一个类型放入，表示始终有一个类型在显示
+        if (this.selects.length === 0) {
+          this.selects.push(this.types[0].type)
+        }
+        this.getMaters()
+      })
+    },
+    // 获取勾选类型下的素材
+    getMaters () {
+      let incon = ''
+      this.selects.forEach((item) => {
+        incon += `'${item}',`
+      })
+      incon = incon.substring(0, incon.length-1)
+      if(incon === ''){
+        this.condition = '1=1'
+      }else{
+        this.condition =`f_failure_type in (${incon})`
+      }
+      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable`, {data: {items: '*', tablename: 't_materials',
+      condition:this.condition , orderitem: 'f_failure_type'}}, {resolveMsg: null, rejectMsg: null}).then((res) => {
+        this.contents = res.data
+      })
+    },
+    add (type) {
+      this.showAdd = true
+      this.addType = type
+    },
+    closeModal () {
+      this.showAdd = false
+      this.addType = ''
+      this.newType = ''
+      this.des_type = ''
+      this.des_simple = ''
+      this.describe = ''
+      this.row = null
+    },
+    // 显示图片
+    showImgea (row) {
+      this.showImg = true
+      this.src = `${this.$androidUtil.getProxyUrl()}/weixin/image/material/${row.f_mediaid}/${this.f_fengongsi}`
+    },
+    close () {
+      this.showImg = false
+      this.src = ''
+    },
+    enlarge () {
+      // //tag
+      if (this.power <= 5) {
+        this.power += 0.5
+        this.imgState()
+      }
+    },
+    reduce () {
+      // //tag
+      if (this.power > 0.5) {
+        this.power -= 0.5
+        this.imgState()
+      }
+    },
+    leftRevolve () {
+      // //tag
+      this.deg -= 90
+      this.imgState()
+    },
+    rightRevolve () {
+      // //tag
+      this.deg += 90
+      this.imgState()
+    },
+    imgState () {
+      $('#imgstate').css({
+        'transform': 'rotate(' + this.deg + 'deg) scale(' + this.power + ' ,' + this.power + ')'
+      })
+    },
+    // 全屏播放视频
+    palyVideo (row) {
+      // 先给资源路径
+      new HttpResetClass().load("post",`/weixin/material/${row.f_mediaid}/${this.f_fengongsi}`).then(res=>{
+        if(res.data){
+          this.src = res.data.down_url
+          this.src_img = `${this.$androidUtil.getProxyUrl()}/weixin/image/material/${row.f_thumbnail}`
+          this.$nextTick(() => {
+              this.videoShow = true
+            })
+        }
+      })
+    },
+    palyAudio (row) {
+      new HttpResetClass().load("post",`/weixin/material/${row.f_mediaid}/${this.f_fengongsi}`).then(res=>{
+        if(res.data){
+          this.src = res.data.down_url
+          this.src_img = `${this.$androidUtil.getProxyUrl()}/weixin/image/material/${row.f_thumbnail}`
+          this.$nextTick(() => {
+            this.audioShow = true
+          })
+        }
+      })
+    },
+    // 保存添加
+    confirm () {
+      // 如果row存在，表示修改
+      if (this.row) {
+        this.addMater()
+        return
+      }
+      // 修改资源类型
+      if (this.addType === 'modify') {
+      } else { // 添加资源
+        let that = this
+        var form = new FormData()
+        var xhr = new XMLHttpRequest()
+        form.append('Content-Type', 'multipart-form')
+        let file = this.$els.materfile.files
+        //tag
+        //tag
+        this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable`, {data: {items: '*', tablename: 't_materials',
+            condition:`f_file_name='${file[0].name}'`, orderitem: 'f_failure_type'}}, {resolveMsg: null, rejectMsg: null}).then((res) => {
+              //tag
+          if(res.data.length !=0){
+            that.$showAlert('该文件已存在', 'danger', 0)
+          }else{
+            form.append('file', file[0])
+            xhr.onload = function () {
+              //tag
+              if (this.status === 200) {
+                //tag
+                let data = JSON.parse(this.responseText)
+                if (data.code === 200) {
+                  that.addMater(data)
+                }
+              } else {
+                that.$showAlert('素材上传失败', 'danger', 0)
+              }
+            }
+            let type
+            //tag
+            if(/image\/\w+/.test(file[0].type)){
+              type = 'image'
+            }else if(/audio\/\w+/.test(file[0].type)){
+              type = 'voice'
+            }
+            else if (/video\/\w+/.test(file[0].type)) {
+              type = 'video'
+            }
+            let url = `${this.$androidUtil.getProxyUrl()}/weixin/upload/${type}/${this.f_fengongsi}`
+            xhr.open('POST', url, true)
+            // xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
+            xhr.send(form)
+          }
+        })
+      }
+    },
+    // 拿到素材返回的id将素材存到数据库中
+    addMater (obj) {
+      let data = {}
+      // 如果有row说明为修改
+      if (this.row && !obj) {
+        data = {
+          id: this.row.id,
+          f_failure_type: this.des_type,
+          f_des_simple: this.des_simple,
+          f_describe: this.describe
+        }
+      } else {
+        data = {
+          f_file_name: obj.fileName,
+          f_file_type: obj.msgType,
+          f_thumbnail: obj.thumbnail,
+          f_mediaid: obj.mediaId,
+          f_failure_type: this.des_type,
+          f_des_simple: this.des_simple,
+          f_describe: this.describe
+        }
+      }
+      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/entity/t_materials`, data, {resolveMsg: '素材上传成功', rejectMsg: '素材上传失败'}).then((res) => {
+        // //tag
+        // 上传并保存成功后，清除所有的输入
+        this.des_type = ''
+        this.des_simple = ''
+        this.describe = ''
+        // 只在添加资源时清空文件输入框
+        // if (this.addType === 'mater') {
+        //   //tag
+        //   this.$els.materfile.outerHTML = this.$els.materfile.outerHTML
+        // }
+        // 如果时修改的话，要将修改内容清空一下，刷新界面
+        if (this.row) {
+          this.row = null
+        }
+        // 整体刷新
+        this.getTypes()
+        // 模态框消失
+        this.showAdd = false
+        //tag
+      })
+    },
+    modify (row, index) {
+      this.row = row
+      this.showAdd = true
+      this.addType = 'modify'
+      this.des_type = row.f_failure_type
+      this.des_simple = row.f_des_simple
+      this.describe = row.f_describe
+    },
+    deleteRow (row, index) {
+      this.$showMessage('删除后不可恢复，确认删除吗？', ['confirm', 'cancel']).then((res) => {
+        if (res === 'confirm') {
+          let gen = deleGen(this, row)
+          co(gen)
+        }
+      })
+    },
+    // 清空选择项
+    clearRows () {
+      this.rows = []
+    },
+  },
+  watch: {
+    'selects.length' (val) {
+      this.getMaters()
+    }
+  }
+}
+</script>
+<style media="screen">
+.workOrderInfo .roee label {
+  display: inline-block;
+  height: 100%;
+  min-width: 100px;
+  text-align: justify;
+  text-align-last: justify;
+}
+.add-content {
+  display: flex;
+  background: #f8f8f8;
+  border: 2px dashed #e0e0e0;
+  border-radius: 5px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: auto;
+  cursor: pointer;
+}
+.add-content-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100%;
+  max-height: 50px;
+  text-align: center;
+}
+.img-card {
+  border: 1px solid #F8F8F8;
+  padding: 8px;
+  margin: 8px;
+}
+.card-des-line {
+  height: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.card-des-lines {
+  margin-bottom: 5px;
+  height: 60px;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 3; /** 显示的行数 **/
+  overflow: hidden;  /** 隐藏超出的内容 **/
+  color: #5A5E66;
+}
+.text-between {
+    display: flex;
+    justify-content: space-between;
+    color: #878D99;
+}
+.text-between > .card-des-line {
+  flex: 1;
+}
+.img-card .magic-checkbox + label:before {
+  right: 0px;
+  left: auto;
+  margin-top: -5px;
+}
+.img-card .magic-checkbox + label:after {
+  top: -3px;
+  right: 7px;
+  left: auto;
+}
+.cut-img {
+  position: relative;
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cut-img > img {
+  height: 200px;
+}
+.play-icon {
+  position: absolute;
+  top:0;
+  width: 100%;
+  height: 100%;
+  background: black;
+  opacity: 0.5;
+  background-image: url('../../../assets/play.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 50%;
+  cursor: pointer;
+}
+/*.full-img {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  background: rgba(0,0,0,0.8);
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+}*/
+</style>