yos_web/src/HDrpManagement/contractModel/modules/detail.vue

<template>
  <div style="background:#F1F2F3;height:100vh;box-sizing:border-box">
    <p class="normal-title normal-panel container">合同模板详情</p>
    <div class="content normal-panel">
      <div class="header container">
        <span class="title">{{type[$route.query.type]}}条款设置</span>
        <el-button size="small" type="primary" v-if="tool.checkAuth($route.name,'addClaue')" @click="addClause">添加</el-button>
      </div>
      <div class="container">
        <tableLayout v-if="show" :layout="tablecols" :data="list" :opwidth="200" :custom="true"  height="calc(100vh - 250px)" >
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname == 'content'">
              <el-input 
                v-if="scope.column.data.sa_contract_template_clauseid == 0 || scope.column.data.sa_contract_template_clauseid == currentEdit.sa_contract_template_clauseid" 
                v-model="scope.column.data.content" size="small" 
                placeholder="请输入条款"
                type="textarea"
              ></el-input>
              <span v-else>{{scope.column.data[scope.column.columnname]}}</span>
            </div>
            <div v-else-if="scope.column.columnname == 'editable'">
              <el-checkbox
                v-if="currentEdit.sa_contract_template_clauseid!=scope.column.data.sa_contract_template_clauseid && scope.column.data.sa_contract_template_clauseid != 0"
                :disabled="true"
                :value="scope.column.data.editable"
                :true-label="1"
                :false-label="0">
              </el-checkbox>
              <el-checkbox
                v-else
                v-model="currentEdit.editable"
                :true-label="1"
                :false-label="0">
              </el-checkbox>
            </div>
            <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
          </template>
          <template v-slot:opreation="scope">
            <span class="inline-16">
              <el-button 
                size="mini" 
                type="text" 
                @click="save(scope.data)" 
                v-if="scope.data.sa_contract_template_clauseid == 0 || currentEdit.sa_contract_template_clauseid==scope.data.sa_contract_template_clauseid"
              >保 存</el-button>
              <el-button size="mini" type="text" @click="editBtn(scope.data)" v-else-if="tool.checkAuth($route.name,'editClaue')">编 辑</el-button>
            </span>
            <delete-btn v-if="tool.checkAuth($route.name,'delClaue')" message="确定删除当前条款吗?" nameId="20221125195702" :data="scope.data" @deleteSuccess="onDelete" :id="scope.data.sa_contract_template_clauseid" nameKey="sa_contract_template_clauseids"></delete-btn>
          </template>
        </tableLayout>
        <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>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      type:{
        1:'直销项目协议',
        2:'经销项目协议',
        3:'经销商合作协议',
        4:'居间协议',
        5:'工具借用协议',
      },
      params: {
        "id": 20221125200102,
        "content": {
            "contracttype":'',
            "pageNumber": 1,
            "pageSize": 20,
            "where": {
                "condition": ""
            }
        },
      },
      total:0,
      tablecols:[],
      list:[],
      currentEdit:{},
      show:true
    };
  },
  computed:{
  },
  watch:{
  },
  created () {
    this.tablecols = this.tool.tabelCol(this.$route.name).clauseTable.tablecols
    this.listData()
  },
  methods: {
    /* 获取条款 */
    async listData () {
      this.params.content.contracttype = this.$route.query.type
      let res = await this.$api.requested(this.params)
      this.list = res.data
      this.total = res.total
      console.log(res);
    },
    addClause () {
      this.list.unshift({
        content:'',
        editable:1,
        sa_contract_template_clauseid:0
      })
    },
    editBtn (data) {
      this.currentEdit = data
      console.log(this.currentEdit);
    },
    async save (data) {
      if(!data.content) return
      let item = {
        content:data.content,
        editable:data.editable,
        sa_contract_template_clauseid:data.sa_contract_template_clauseid
      }
      let res = await this.$api.requested({
        "content": {
            "contracttype": this.$route.query.type,//1直销,2经销,3框架,4居间,5工具，
            "items": [item]
        },
        "id": 20221125194202,
      })
      this.tool.showMessage(res,() => {
        let index = this.list.findIndex(item => item == data)
        this.list[index] = res.data[0]
        this.$forceUpdate()
        this.currentEdit = {}
      })
    },
    onDelete (data) {
      this.list.splice(this.list.findIndex(item => item == data),1)
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.listData()
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 14px;
  margin-top: 10px;
}
.content {
  margin-top: 10px;
  height: calc(100vh - 66px);
}
.content .header{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #cccccc;
}
</style>