yiliangyiyun-pc-jj/src/views/cost/cost.vue

<template>
  <div class="bg" id="index">
    <div class="row1">
      <div class="left">
        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>

      </div>
      <div class="right">
        <el-input :placeholder="'可按费用名称、备注内容查找'" clearable v-model="searchKeyWord" class="search_css"></el-input>
        <el-button type="primary" size="small" @click="lookup" class="search">查找</el-button>
      </div>
    </div>
    <div class="row2">
      <div class="left">
        <el-button type="primary" size="small">全部</el-button>
        <el-button type="primary" size="small">收入</el-button>
        <el-button type="primary" size="small">支出</el-button>
        <div>
          <div class="text">合计：收入{{ 22 }} - 支出{{ 22 }}=利润{{ 0 }}</div>
        </div>
      </div>
      <div class="right">
        <el-button type="primary" size="small" @click="add()">添加</el-button>
      </div>
    </div>
    <el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%" class="table">
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column property="date" label="类型" width="120">
      </el-table-column>
      <el-table-column property="name" label="费用名称" width="120">
      </el-table-column>
      <el-table-column property="address" label="金额（元）">
      </el-table-column>
      <el-table-column property="address" label="备注">
      </el-table-column>
      <el-table-column prop="address" label="附件" show-overflow-tooltip>
        <template slot-scope="scope">
          <img width="18" height="20" style="vertical-align: text-top; position: relative; top: -1px"
            src="../../../public/img/fujian.png" @click="fujian(scope.row)" alt="" />
          <span v-if="scope.row.addressUrlArray != null">
            {{
              scope.row.addressUrlArray.length == 0
              ? ''
              : scope.row.addressUrlArray.length
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" show-overflow-tooltip>
        <template scope="scope">
          <span style="color: #409EFF;margin-right:5px" @click="edit(scope.row)">编辑</span>
          <span style="color: red;" @click="del(scope.row)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center; padding: 10px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
      </el-pagination>
      <WinseaContentModal v-model="accessoryTFs" :title="$t('system.noticeCircular.information')"
        @on-cancel="handleClose">
        <div v-if="applstatus">
          <ws-upload ref="upload" :size-limit="size" @onChange="onChange" :comp-id="compId" :appendix-ids="appendixIdss"
            accept=".jpg, .jpeg, .png, .pdf, .doc, .docx, .zip, .rar"
            v-hasPermission="`contractManagement.buyContract.buyContractInfo.appl`" />
        </div>
        <ws-upload v-else ref="upload" :comp-id="compId" :appendix-ids="appendixIdss" :editable="false"
          accept=".jpg, .jpeg, .png, .pdf, .doc, .zip, .rar" />
      </WinseaContentModal>
      <WinseaContentModal v-model="show" title="费用" @on-cancel="handleClose3">
        <el-form>
          <el-form-item label-width='100px' label="收款方" span="1" prop="payee">
            <el-input class='input50 input_css' placeholder="输入收款方"></el-input>
          </el-form-item>
          <ws-upload style="margin-left:30px" ref="upload" table-name="maintain_work_order" oss-key="mainPlan"
            :comp-id="compId" :appendix-ids="appendixIdsAdd" :vesselId="deptBudgetList.addressUrl" :size-limit="size"
            @uploadSuccess="uploadSuccess" @onChange="onChange" accept=".jpg, .jpeg, .png, .pdf, .doc, .zip, .rar" />
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleClose3">取 消</el-button>
          <el-button @click="submitdata">提交</el-button>
        </div>
      </WinseaContentModal>
    </div>
  </div>
</template>
  
<script>
import WsUpload from '@/components/WsUpload'
export default {
  components: {
    WsUpload
  },
  data() {
    return {
      fileNum: '',
      size: 10,
      appendixIdsAdd: '',
      show: false,
      deptBudgetList: {},
      compId: localStorage.getItem('ws-pf_compId'),
      appendixIdss: [],
      applstatus: false,
      accessoryTFs: false,
      deptCircularPage: {},
      deptBudgetTotal: 0,
      currentPage: 1,
      pageSize: 10,
      id: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      value2: '',
      searchKeyWord: ''
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
  },
  mounted() {


  },
  beforeDestroy() {


  },
  methods: {
    submitdata() { },
    onChange(files) {
      this.fileNum = files
      this.$refs.upload.handleSaveBill().then((res) => {
        console.log(files)
      })
    },
    uploadSuccess(data, files, url) {
      console.log(data, files, url)

      // this.deptBudgetList.
      // this.formData.append('files', files)
      // this.feedbackObj.uploadNameAttachment = data.appendixName
      // this.feedbackObj.pathUploadAttachment = data.appendixPath
      // // this.newAppendixs = files
      // this.onChangeFlag = true
    },
    handleClose3() {
      this.show = false
    },
    handleClose() {
      // this.dialogViewSpareMoney = false
    },
    fujian(row) {
      this.id = row.id
      this.accessoryTFs = true
      this.appendixIdss = row.addressUrl
      console.log(this.appendixIdss)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
      this.getList()
    },
    edit() { },
    del(val) {
      this.$confirm('确定删除费用信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      }).catch(() => {
        return false
      });
    },
    lookup() { },
    add() {
      this.show = true
    },
  },
};
</script>
<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  padding: 16px 16px 10px 16px;
  box-sizing: border-box;
  // background-image: url("../../assets/images/pageBg.png");
  background-size: cover;
  background-position: center center;
}

.row1 {
  display: flex;
  justify-content: space-between;

  .right {
    display: flex;
  }
}

.search {
  margin-left: 10px;
}

.row2 {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;

    .text {
      margin: 0 10px;
    }
  }
}

.table {
  margin-top: 20px;
}
</style>