yos_web/src/HDrpManagement/contractManage/components/contractClause/contractClause.vue

<template>
  <div>
    <div>
      <div class="flex-align-center" style="margin-bottom:10px">
        <el-input size="small" style="width:200px;margin-right:10px" v-model="params.content.where.condition" placeholder="输入搜索内容" @clear="listData(params.content.pageNumber = 1)" @keyup.native.enter="listData(params.content.pageNumber = 1)" clearable></el-input>
        <slot name="addProduct"/>
        <el-popconfirm title="确定重置当前合同吗？" @confirm="reset()">
          <el-button size="small" slot="reference" class="inline-16" :disabled="disabled" v-if="tool.checkAuth($route.name,'resetContractClaus')">重 置</el-button>
        </el-popconfirm>
      </div>
      <tableLayout :layout="tablecols" :data="list" :opwidth="200" :width="false" height="calc(100vh - 550px)" :custom="true" fixedName="operation" >
        <template v-slot:customcol="scope">
          <div v-if="scope.column.columnname == 'content'">
            <el-input v-if="currentEdit.sa_contract_clauseid==scope.column.data.sa_contract_clauseid || scope.column.data.sa_contract_clauseid == 0" type="textarea" v-model="scope.column.data.content" size="small" placeholder="请输入条款"></el-input>
            <span v-else>{{scope.column.data[scope.column.columnname]}}</span>
          </div>
          <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
        </template>
        <template v-slot:opreation="scope">
          <el-button v-if="currentEdit.sa_contract_clauseid == scope.data.sa_contract_clauseid || scope.data.sa_contract_clauseid == 0" type="text" size="mini" @click="save(scope.data)" class="inline-16">保 存</el-button>
          <slot name="edit" :data="scope.data" v-else></slot>
          <slot name="del" :data="scope.data"></slot>
        </template>
      </tableLayout>
    </div>
    <div style="margin-top:16px;text-align:right">
      <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.content.pageNumber"
          :page-size="params.content.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props:['disabled'],
  components: {},
  name: '',
  data() {
    return {
      list:[],
      params: {
        "id": 20221128162302,
        "content": {
          "sa_contractid":'',
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
              "condition": ""
          }
        },
      },
      form: {
        discountrate:'',
      },
      tablecols:[],
      total:0,
      currentEdit:'',
      itemclassid:''
    };
  },
  computed:{
  },
  watch:{
  },
  created () {
    if (this.$route.query.id) this.listData()
    this.tablecols = this.tool.tabelCol(this.$route.name).clauseListTable.tablecols
  },
  methods: {
    async listData(){
      this.params.content.sa_contractid = this.$route.query.id
      const res = await this.$api.requested(this.params)
      this.list = res.data
      this.total = res.total
      console.log(this.list);
      
    },
    handleChange(num) {
    },
    async reset () {
      let res = await this.$api.requested({
        "id": 20221128161602,
        "content": {
            "sa_contractid":this.$route.query.id
        },
      })
      this.tool.showMessage(res,() => {
        this.listData()
      })
    },
    async save (data) {
      if(!data.content)  {
        this.$message.error('条款内容不能为空');
      }else {
        let res = await this.$api.requested({
          "id": 20221128144502,
          "content": {
            "sa_contractid": this.$route.query.id,
            "items": [
              {
                "sa_contract_clauseid": data.sa_contract_clauseid,
                "content": data.content
              },
            ]
          },
        })
        this.tool.showMessage(res,() => {

          let index = this.list.findIndex(item => item == data)
          this.list[index] = res.data[0]
          this.currentEdit = {}
          console.log(this.list);
          this.$forceUpdate()
        })
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
    },
  },
};
</script>

<style scoped>

</style>