contract-business-web/src/views/finance/financialEvaluation.vue

<template>
  <div style="padding: 0 20px">
    <lx-header
      icon="md-apps"
      :text="$route.meta.title"
      style="margin-bottom: 10px; border: 0px; margin-top: 15px"
    >
      <div slot="content"></div>
      <slot>
        <span style="padding: 0 6px; word-break: keep-all">关键字</span>
        <span>
          <Input
            v-model="select.keyword"
            placeholder="请输入关键字"
            style="width: 180px"
          ></Input>
        </span>
        <Button type="primary" style="margin-left: 10px" ghost @click=""
          >重置</Button
        >
        <Button type="primary" style="margin-left: 10px" @click="getList">查询</Button>
        <Button
          v-if="false"
          type="primary"
          style="margin-left: 10px"
          @click="
            $refs['addPropertyPlan'].setType('add'),
              $refs['addPropertyPlan'].show()
          "
          >新增</Button
        >
      </slot>
    </lx-header>

    <xy-table :show-index="false" :list="list" :table-item="table" :object-span-method="objectSpanMethod">
      <template #btns>
        <el-table-column label="操作" header-align="center" align="left" v-if="role == 1 || role == 0">
          <template #default="{ row }">
            <Button ghost size="small" type="primary" @click="$refs['addPropertyPlan'].setType('editor'),$refs['addPropertyPlan'].pid = row.pid,$refs['addPropertyPlan'].setId(row.id),$refs['addPropertyPlan'].show()">编辑
            </Button>
            <Poptip v-if="role == 0" transfer confirm placement="bottom" title="确认要删除吗"
                    @on-ok="destroy(row)">
              <Button style="margin-left: 4px;" ghost size="small" type="error">删除
              </Button>
            </Poptip>
          </template>
        </el-table-column>
        <el-table-column label="更多" prop="more" header-align="center" align="left" v-if="role == 1 || role == 0"  >
          <template #default="{ row }">
            <Button size="small" type="primary" @click="$refs['file'].setId(row.pid),$refs['file'].show()">附件
            </Button>
            <Button size="small" type="primary" @click="$refs['remark'].setId(row.pid),$refs['remark'].show()">备注
            </Button>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <div style="display: flex; justify-content: flex-end; margin-top: 10px">
      <Page
        :total="total"
        show-elevator
        @on-change="
          (e) => {
            select.page = e;
            getList();
          }
        "
      />
    </div>

    <addPropertyPlan ref="addPropertyPlan" :role="role" @refresh="getList"></addPropertyPlan>
    <remark ref="remark"></remark>
    <file ref="file"></file>
  </div>
</template>

<script>
import { mergeTableRow } from "@/utils/mergeTableRow";
import { index, destroy, save } from "@/api/propertyPlan";

import addPropertyPlan from "@/views/finance/components/addPropertyPlan.vue";
import remark from "./components/remark.vue";
import file from "./components/file.vue";
export default {
  components: {
    file,
    remark,
    addPropertyPlan,
  },
  data() {
    return {
      role: -1,//0业务，1财务
      select: {
        page: 1,
        page_size: 10,
      },
      originalList: [],
      list: [],
      table: [
        {
          prop: 'index',
          width: 60,
          sortable: false,
        },
        {
          label: "项目名称",
          minWidth: 220,
          align: "left",
          prop: 'contract.name'
        },
        {
          prop: "plan_date",
          label: "计划评审时间",
          width: 200,
        },
        {
          prop: "actually_date",
          label: "实际评审时间",
          width: 200,
        },
      ],
      total: 0,
    };
  },
  methods: {
    destroy (row) {
      let temp = this.originalList.find(i => i.id === row.pid)
      let index = temp?.item?.indexOf(temp?.item?.find(o => o.id === row.id))
      temp.item.splice(index,1)
      save({
        ...temp,
        item_list: temp.item
      }).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.getList()
      })
    },
    async getList() {
      const res = await index(this.select);
      this.originalList = res.data;
      this.total = res.total;
      let list = [];
      res.data.forEach((i,index) => {
        i.item.forEach(item => {
          list.push({
            index: index+1,
            contract: i.contract,
            pid: i.id,
            ...item
          })
        })
      })

      this.list = mergeTableRow({
        data: list,
        mergeColNames: ['index','contract.name','more'],
        firstMergeColNames: ['index',"pid",'pid'], // 受影响的列，只合并以firstMerge为首的同类型数据
        firstMerge: "index",
      })

      console.log(this.list)
    },
    //合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },
  },
  computed: {},
  created() {
    this.getList();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.role = to.path.split("_")[1] ? Number(to.path.split("_")[1]) : -1;
    });
  },
};
</script>

<style scoped lang="scss">
Button + Button {
  margin-left: 4px;
}
</style>