apply-clients 5.0.361 → 6.0.3

package/src/components/build/Install/Process/CustomerMaterialMessage.vue

@@ -0,0 +1,414 @@
+<template>
+  <div class="flex">
+    <div class="form-inline auto" style="margin-bottom: 5px;">
+      <label>材料查找：</label>
+      <input type="text" class="form-control" placeholder='请输入查找的材料名称' v-model="param"
+             @keyup.enter="filterParams(param)">
+      <button type="button" class="btn btn-primary" @click="filterParams(param)">查询</button>
+      <button type="button" class="btn btn-warning" @click="add()" v-show="edit">新增</button>
+      <div class="form-inline" style="float: right">
+        <button type="button" class="btn btn-warning add-postition" @click="impexcel()" v-show="edit">导入</button>
+      </div>
+    </div>
+    <div class="col-sm-12 span recordTable" style="margin-top: 10px;min-height: 500px">
+      <partial-view v-ref:single-load>
+        <data-grid :model="model" v-ref:grid>
+          <template partial='head'>
+            <tr>
+              <th>序号</th>
+              <th>材料类型</th>
+              <th>材料名称</th>
+              <th>材料规格</th>
+              <th>数量</th>
+              <th>单价</th>
+              <th>金额</th>
+              <th v-show="edit">是否缴费</th>
+              <th v-show="edit">操作</th>
+            </tr>
+          </template>
+          <template partial='body'>
+            <td>{{$index+1}}</td>
+            <td>{{row.f_material_type}}</td>
+            <td>{{row.f_material_name}}</td>
+            <td>{{row.f_material_spec}}</td>
+            <td>{{row.f_quantity}}</td>
+            <td>{{row.f_price}}</td>
+            <td>{{row.f_money}}</td>
+            <!--<td>{{row.f_remarks}}</td>-->
+            <td v-show="edit"><input type="checkbox" v-model="row.f_pay" @click="$parent.$parent.$parent.paychange(row)"/></td>
+            <td class="flex-around">
+              <button type="button" name="button" class="btn btn-link"
+                      @click.stop="$parent.$parent.$parent.modifyParam(row)" v-show="edit">修改
+              </button>
+              <button type="button" name="button" class="btn btn-link"
+                      @click.stop="$parent.$parent.$parent.deleteItem(row)" v-show="edit">删除
+              </button>
+            </td>
+          </template>
+        </data-grid>
+      </partial-view>
+    </div>
+  </div>
+  <modal :show.sync="show" v-ref:modal backdrop="false">
+    <header slot="modal-header" class="modal-header">
+      <button type="button" class="close" @click="close"><span>&times;</span></button>
+      <h4 class="modal-title">配置</h4>
+    </header>
+    <article slot="modal-body" class="modal-body">
+      <div class="from-group">
+        <label>材料类型</label>
+        <input-select class="input-select" :value.sync="selectItem.f_material_type" v-model="selectItem.f_material_type"
+                      v-ref:customertype
+                      :options='fmaterialtype'
+                      @change="fmaterialnames"
+                      close-on-select></input-select>
+      </div>
+      <div class="from-group">
+        <label>材料名称</label>
+        <input-select class="input-select" :value.sync="selectItem.f_material_name" v-model="selectItem.f_material_name"
+                      v-ref:customertype
+                      :options='fmaterialname'
+                      @change="fmaterialspecs"
+                      close-on-select></input-select>
+        <!--<input type="text" class="form-control" v-model="selectItem.f_material_name">-->
+      </div>
+      <div class="from-group">
+        <label>材料规格</label>
+        <input-select class="input-select" :value.sync="selectItem.f_material_spec" v-model="selectItem.f_material_spec"
+                      v-ref:customertype
+                      :options='fmaterialspec'
+                      @change="fprice"
+                      close-on-select></input-select>
+        <!--<input type="text" class="form-control" v-model="selectItem.f_material_spec">-->
+      </div>
+      <div class="from-group">
+        <label>单价</label>
+        <input-select class="input-select" :value.sync="selectItem.f_price" v-model="selectItem.f_price"
+                      v-ref:customertype
+                      :options='fmaterialprice'
+                      close-on-select></input-select>
+        <!--<input type="text" class="form-control" v-model="selectItem.f_price">-->
+      </div>
+      <div class="from-group">
+        <label>数量</label>
+        <input type="text" class="form-control" v-model="selectItem.f_quantity">
+      </div>
+      <div class="from-group">
+        <label>金额</label>
+        <input type="text" class="form-control" v-model="selectItem.f_money">
+      </div>
+      <div class="from-group">
+        <label>备注</label>
+        <input type="text" class="form-control" v-model="selectItem.f_remarks">
+      </div>
+    </article>
+    <footer slot="modal-footer" class="modal-footer">
+      <button v-show="show" type="button" class="btn btn-default" @click='close'>取消</button>
+      <button v-show="show" type="button" class="btn btn-success" @click='confirm'>确认</button>
+    </footer>
+  </modal>
+  <modal :show.sync="isShow" v-ref:modal backdrop="false">
+    <header slot="modal-header" class="modal-header">
+      <button type="button" class="close" @click="closeFile"><span>&times;</span></button>
+      <h4 class="modal-title">材料导入</h4>
+    </header>
+    <article slot="modal-body" class="modal-body">
+      <div class="form-group">
+        <file-upload class="my-file-uploader" name="materialExcel"
+                     action="rs/file/uploadFile" tagname="文件导入" :headers="headers" v-ref:file></file-upload>
+      </div>
+    </article>
+    <footer slot="modal-footer" class="modal-footer"></footer>
+  </modal>
+</template>
+
+<script>
+  import {HttpResetClass} from 'vue-client'
+
+  let getInfo = async function (self) {
+    if (!self.selectdata)
+      return
+    let data = {
+      tablename: 't_material',
+      condition: `f_uuuid = '${self.selectdata.f_process_id}' and f_type = '报建'`
+    }
+    let reset = new HttpResetClass()
+    await reset.load('POST', 'rs/sql/singleTable', {data: data}, {resolveMsg: null, rejectMsg: '获取材料信息失败'})
+      .then((res) => {
+        self.model.rows = []
+        self.model.rows = res.data
+        // 备份用于查询
+        self.params = res.data
+      })
+  }
+  export default {
+    title: '材料信息',
+    props: ['selectdata','edit'],
+    data() {
+      return {
+        fmaterialtype: [],
+        fmaterialname: [],
+        fmaterialspec: [],
+        fmaterialprice: [],
+        headers: {'username': this.$login.f.name, 'blodid': this.selectdata.f_process_id,'fusetype':'报建execl导入材料'},
+        params: null,
+        record: {},
+        selectItem: {},
+        model: {
+          rows: []
+        },
+        show: false,
+        isShow: false
+      }
+    },
+    async ready() {
+        this.load()
+    },
+    watch: {
+      'selectdata'() {
+        this.headers.blodid = this.selectdata.f_process_id
+        getInfo(this)
+      }
+    },
+    computed: {
+      async fprice(){
+        if(this.selectItem.f_material_type && this.selectItem.f_material_name && this.selectItem.f_material_spec){
+          this.fmaterialprice = []
+          let http = new HttpResetClass()
+          let data = {
+            columnname: 'f_price',
+            tablename: 't_material',
+            condition: `f_material_type = '${this.selectItem.f_material_type}' and f_material_name = '${this.selectItem.f_material_name}' and f_material_spec = '${this.selectItem.f_material_spec}' ORDER  BY f_price desc`
+          }
+          let res = await http.load('POST', 'rs/sql/getdistinct', {data: data}, {
+            resolveMsg: null,
+            rejectMsg: "获取f_material_type失败"
+          }, {silent: true})
+          res.data.forEach((row) => {
+            let temp = {
+              label: row.f_price,
+              value: row.f_price
+            }
+            this.fmaterialprice.push(temp)
+          })
+        }
+      },
+      async fmaterialnames() {
+        if (this.selectItem.f_material_type) {
+          this.fmaterialname = []
+          let f_material_type = this.selectItem.f_material_type
+          let http = new HttpResetClass()
+          let data = {
+            columnname: 'f_material_name',
+            tablename: 't_material',
+            condition: `f_material_type = '${f_material_type}'`
+          }
+          let res = await http.load('POST', 'rs/sql/getdistinct', {data: data}, {
+            resolveMsg: null,
+            rejectMsg: "获取f_material_name失败"
+          }, {silent: true})
+          res.data.forEach((row) => {
+            let temp = {
+              label: row.f_material_name,
+              value: row.f_material_name
+            }
+            this.fmaterialname.push(temp)
+          })
+        }
+      },
+      async fmaterialspecs() {
+        if (this.selectItem.f_material_name) {
+          this.fmaterialspec = []
+          let f_material_name = this.selectItem.f_material_name
+          let http = new HttpResetClass()
+          let data = {
+            columnname: 'f_material_spec',
+            tablename: 't_material',
+            condition: `f_material_name = '${f_material_name}'`
+          }
+          let res = await http.load('POST', 'rs/sql/getdistinct', {data: data}, {
+            resolveMsg: null,
+            rejectMsg: "获取f_material_spec失败"
+          }, {silent: true})
+          res.data.forEach((row) => {
+            let temp = {
+              label: row.f_material_spec,
+              value: row.f_material_spec
+            }
+            this.fmaterialspec.push(temp)
+          })
+        }
+      }
+    },
+    methods: {
+      // 父组件更新子组件属性
+      updateData(val) {
+        this.headers.blodid = val.f_process_id
+        this.selectdata = val
+      },
+      async load(){
+        let http = new HttpResetClass()
+        let data = {
+          columnname: 'f_material_type',
+          tablename: 't_material',
+          condition: `1=1`
+        }
+        let res = await http.load('POST', 'rs/sql/getdistinct', {data: data}, {
+          resolveMsg: null,
+          rejectMsg: null
+        }, {silent: true})
+        res.data.forEach((row) => {
+          let temp = {
+            label: row.f_material_type,
+            value: row.f_material_type
+          }
+          this.fmaterialtype.push(temp)
+        })
+      },
+      impexcel() {
+        this.isShow = true
+      },
+      closeFile() {
+        this.isShow = false
+        // 将选的文件清空
+        this.$refs.file.$el.querySelector('input').value = ''
+      },
+      deleteItem(row) {
+        this.$showMessage('删除后不可恢复，确认删除吗？', ['confirm', 'cancel']).then((res) => {
+          if (res === 'confirm') {
+            this.$resetpost('rs/logic/applyDeleteValue', {tablename: 't_material', id: row.id}).then((res) => {
+              getInfo(this)
+            })
+          }
+        })
+      },
+      filterParams(param) {
+        if (param && param !== "") {
+          let temp = []
+          for (var i = 0; i < this.model.rows.length; i++) {
+            if (this.model.rows[i].f_material_name.includes(param)) {
+              temp.push(this.model.rows[i])
+            }
+          }
+          this.model.rows = temp
+        } else {
+          this.model.rows = this.params
+        }
+      },
+      add() {
+        this.show = true
+      },
+      // 修改按钮
+      modifyParam(row) {
+        // this.selectItem = row
+        this.$set('selectItem.id', row.id)
+        this.$set('selectItem.f_uuuid', row.f_uuuid)
+        this.$set('selectItem.f_material_type', row.f_material_type)
+        this.$set('selectItem.f_material_name', row.f_material_name)
+        this.$set('selectItem.f_material_spec', row.f_material_spec)
+        this.$set('selectItem.f_quantity', row.f_quantity)
+        this.$set('selectItem.f_price', row.f_price)
+        this.$set('selectItem.f_money', row.f_money)
+        this.$set('selectItem.f_remarks', row.f_remarks)
+        this.show = true
+      },
+      // 缴费情况修改
+      paychange(row) {
+        let http = new HttpResetClass()
+        row.f_pay=!row.f_pay
+        http.load('POST','rs/logic/saveentity', {data:{tablename:'t_material',parameters:row}}, {
+          resolveMsg: null,
+          rejectMsg: "缴费状态更新失败"
+        }, {silent: true})
+      },
+      confirm() {
+        // 无主键为插入
+        if (!this.selectItem.f_uuuid) {
+          this.selectItem.f_type = '报建'
+          this.selectItem.f_uuuid = this.selectdata.f_process_id
+          let data = {
+            tablename: 't_material',
+            parameters: this.selectItem
+          }
+          this.$resetpost('rs/logic/save', {data: data}).then((res) => {
+            this.show = false
+            // 如果没有id，需要在数组中添加
+            getInfo(this)
+            this.selectItem = {}
+          })
+        } else { // 有主键为更新
+          let data = {
+            tablename: 't_material',
+            parameters: this.selectItem
+          }
+          this.$resetpost('rs/logic/saveentity', {data: data}).then((res) => {
+            this.show = false
+            // 如果没有id，需要在数组中添加
+            getInfo(this)
+            this.selectItem = {}
+          })
+        }
+      },
+      // 关闭模态框
+      close() {
+        this.show = false
+        this.selectItem = {}
+      }
+      // modify (row, key) {
+      //   this.value = row
+      //   this.key = key
+      // },
+      // clear (row, key) {
+      //   if (this.key) {
+      //     this.model.rows[key] = this.value
+      //     this.value = null
+      //     this.key = null
+      //   }
+      // }
+    }
+    ,
+    events: {
+      onFileUpload: function (file, res) {
+        if (!this.selectdata.f_process_id) {
+          this.$showMessage("数据异常，导入失败")
+          return
+        }
+        let data = {
+          tablename: 'f_material',
+          filepath: res.f_downloadpath,
+          f_process_id: this.selectdata.f_process_id
+        }
+        this.$resetpost('rs/logic/materialImport', data, {resolveMsg: '上传成功', rejectMsg: '上传失败'}).then((res) => {
+          //this.model.rows = res.data.data
+          // for (var i = 0; i < res.data.data.length; i++) {
+          //   res.data.data[i].t_material.f_pay = res.data.data[i].t_material.t_pay?true:false
+          //   this.model.rows.push(res.data.data[i].t_material)
+          // }
+          this.load()
+          console.log('dddddddd', this)
+          this.closeFile()
+        })
+      }
+    }
+  }
+</script>
+<style scoped>
+  .recordTable table tr th {
+    font-weight: bold;
+  }
+
+  .recordTable table tr:hover {
+    background-color: rgb(230, 230, 230);
+  }
+
+  td {
+    text-align: center !important
+  }
+
+  .input-select {
+    width: 100%;
+    height: 34px;
+    align-content: center;
+    margin-top: 10px;
+  }
+</style>