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

<template>
  <div>
    <el-button @click="drawer=true" size="mini">编 辑</el-button>
    <el-drawer size="30%" append-to-body :visible.sync="drawer">
      <!--合作协议-->
        <el-row v-if="$route.query.type == '框架'">
          <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small">
            <el-col :span="24">
              <el-form-item label="合同模板" prop="sys_printmodelid">
                <el-select v-model="form.sys_printmodelid">
                  <el-option label="一一一" value="111"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="经销商" prop="enterprisename">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="agentVisible"
                  width="400">
                  <selectAgent ref="member" :param="agentListPrams" :radio="true" @onSelect="agentChange" @onCancel="agentVisible = false"></selectAgent>
                  <el-input readonly type="text" slot="reference" size="small" @focus="agentVisible=true;salerVisible = false;projectVisible=false" v-model="form.enterprisename"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="业务员" prop="saler_hrid">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="salerVisible"
                  width="300">
                  <selectPople ref="member" :param="salerListParams" :radio="true" @onSelect="salerChange" @onCancel="salerVisible = false"></selectPople>
                  <el-input readonly type="text" slot="reference" size="small" @focus="salerVisible=true;agentVisible=false" v-model="form.salername"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="整体折扣" prop="discountrate">
                <el-input type="text" size="small" v-model="form.discountrate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同有效期" prop="begdate">
                <el-input style="display:none" v-model="form.begdate"></el-input>
              <time-select ref="timeSelect" class="inline-16" @clearSelect="clearTime" @timeChange="timeChange"></time-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="签约日期" prop="signdate">
                <el-date-picker
                  v-model="form.signdate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同描述" prop="remarks">
                <el-input type="text" size="small" v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <!--经销项目-->
        <el-row v-if="$route.query.type == '经销项目'">
          <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small">
            <el-col :span="24">
              <el-form-item label="合同模板" prop="sys_printmodelid">
                <el-select v-model="form.sys_printmodelid">
                  <el-option label="一一一" value="111"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="经销商" prop="enterprisename">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="agentVisible"
                  width="400">
                  <selectAgent ref="member" :param="agentListPrams" :radio="true" @onSelect="agentChange" @onCancel="agentVisible = false"></selectAgent>
                  <el-input readonly type="text" slot="reference" size="small" @focus="agentVisible=true;salerVisible = false;projectVisible=false" v-model="form.enterprisename"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目名称" prop="sa_projectid">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="projectVisible"
                  width="600">
                  <seleteProject @onSelect="projectChange" @onCanel="projectVisible=false"></seleteProject>
                  <el-input readonly type="text" slot="reference" size="small" @focus="projectVisible=true;salerVisible = false;agentVisible=false" v-model="form.projectname"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="业务员" prop="saler_hrid">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="salerVisible"
                  width="400">
                  <selectPople ref="member" :param="salerListParams" :radio="true" @onSelect="salerChange" @onCancel="salerVisible = false"></selectPople>
                  <el-input readonly type="text" slot="reference" size="small" @focus="salerVisible=true;agentVisible=false;projectVisible=false" v-model="form.salername"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同有效期" prop="begdate">
                <input type="text" style="display:none" v-model="form.begdate">
              <time-select ref="timeSelect" class="inline-16" @clearSelect="clearTime" @timeChange="timeChange"></time-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="签约日期" prop="signdate">
                <el-date-picker
                  v-model="form.signdate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="签约金额">
                <el-input type="text" readonly size="small" placeholder="产品清单总额(自动计算)" v-model="form.signamount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同描述" prop="hrid">
                <el-input type="text" size="small" v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <!--直销项目-->
        <el-row v-if="$route.query.type == '直销项目'">
          <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small">
            <el-col :span="24">
              <el-form-item label="合同模板" prop="sys_printmodelid">
                <el-select v-model="form.sys_printmodelid">
                  <el-option label="一一一" value="111"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="客户" prop="enterprisename">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="accountVisible"
                  width="400">
                  <selectAgent ref="member" :param="agentListPrams" :radio="true" @onSelect="accountChange" @onCancel="accountVisible = false"></selectAgent>
                  <el-input readonly type="text" slot="reference" size="small" @focus="accountVisible=true;agentVisible=false;salerVisible = false;projectVisible=false" v-model="form.enterprisename"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目名称" prop="sa_projectid">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="projectVisible"
                  width="600">
                  <seleteProject @onSelect="projectChange" @onCanel="projectVisible=false"></seleteProject>
                  <el-input readonly type="text" slot="reference" size="small" @focus="projectVisible=true;salerVisible = false;agentVisible=false;accountVisible=false" v-model="form.projectname"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="业务员" prop="saler_hrid">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="salerVisible"
                  width="300">
                  <selectPople ref="member" :param="salerListParams" :radio="true" @onSelect="salerChange" @onCancel="salerVisible = false"></selectPople>
                  <el-input readonly type="text" slot="reference" size="small" @focus="salerVisible=true;agentVisible=false;accountVisible=false;projectVisible=false" v-model="form.salername"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="签约日期" prop="signdate">
                <el-date-picker
                  v-model="form.signdate"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同有效期" prop="begdate">
                <input type="text" style="display:none" v-model="form.begdate">
              <time-select ref="timeSelect" class="inline-16" @clearSelect="clearTime" @timeChange="timeChange"></time-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="签约金额">
                <el-input type="text" readonly size="small" placeholder="产品清单总额(自动计算)" v-model="form.signamount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="合同描述" prop="hrid">
                <el-input type="text" size="small" v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <!--工具使用协议-->
        <el-row v-if="$route.query.type == '工具借用'">
          <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small">
            <el-col :span="24">
              <el-form-item label="合同模板" prop="sys_printmodelid">
                <el-select v-model="form.sys_printmodelid">
                  <el-option label="一一一" value="111"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="客户" prop="enterprisename">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="accountVisible"
                  width="400">
                  <selectAgent ref="member" :param="agentListPrams" :radio="true" @onSelect="accountChange" @onCancel="accountVisible = false"></selectAgent>
                  <el-input readonly type="text" slot="reference" size="small" @focus="accountVisible=true;salerVisible = false" v-model="form.enterprisename"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="业务员" prop="saler_hrid">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="salerVisible"
                  width="300">
                  <selectPople ref="member" :param="salerListParams" :radio="true" @onSelect="salerChange" @onCancel="salerVisible = false"></selectPople>
                  <el-input readonly type="text" slot="reference" size="small" @focus="salerVisible=true;accountVisible=false" v-model="form.salername"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="签约日期" prop="signdate">
                <el-date-picker
                  v-model="form.signdate"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            
            <el-col :span="24">
              <el-form-item label="签约金额">
                <el-input type="text" readonly size="small" placeholder="产品清单总额(自动计算)" v-model="form.signamount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同有效期" prop="begdate">
                <input type="text" style="display:none" v-model="form.begdate">
              <time-select ref="timeSelect" class="inline-16" @clearSelect="clearTime" @timeChange="timeChange"></time-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="单套价格">
                <el-input type="text" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="合同描述" prop="hrid">
                <el-input type="text" size="small" v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <!--居间协议-->
        <el-row v-if="$route.query.type == '居间'">
          <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="110px" size="small">
            <el-col :span="24">
              <el-form-item label="合同模板" prop="sys_printmodelid">
                <el-select v-model="form.sys_printmodelid">
                  <el-option label="一一一" value="111"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="居间服务商" prop="sys_enterpriseid">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="agentVisible"
                  width="400">
                  <selectAgent ref="member" :param="agentListPrams" :radio="true" @onSelect="accountChange" @onCancel="agentVisible = false"></selectAgent>
                  <el-input readonly type="text" slot="reference" size="small" @focus="agentVisible=true;salerVisible = false;projectVisible=false;accountVisible=false" v-model="form.enterprisename"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目名称" prop="sa_projectid">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="projectVisible"
                  width="600">
                  <seleteProject @onSelect="projectChange" @onCanel="projectVisible=false"></seleteProject>
                  <el-input readonly type="text" slot="reference" size="small" @focus="projectVisible=true;salerVisible = false;agentVisible=false;accountVisible=false" v-model="form.projectname"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="业务员" prop="saler_hrid">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="salerVisible"
                  width="300">
                  <selectPople ref="member" :param="salerListParams" :radio="true" @onSelect="salerChange" @onCancel="salerVisible = false"></selectPople>
                  <el-input readonly type="text" slot="reference" size="small" @focus="salerVisible=true;projectVisible=false;agentVisible=false;accountVisible=false" v-model="form.salername"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="签约日期" prop="signdate">
                <el-date-picker
                  v-model="form.signdate"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="佣金比例(%)" prop="kickback">
                <el-input type="text" size="small" v-model="form.kickback"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同有效期" prop="begdate">
                <input type="text" style="display:none" v-model="form.begdate">
              <time-select ref="timeSelect" class="inline-16" @clearSelect="clearTime" @timeChange="timeChange"></time-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="合同描述" prop="hrid">
                <el-input type="text" size="small" v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div class="fixed__btn__panel">
          <el-button size="small" @click="onCancel" class="normal-btn-width">取 消</el-button>
          <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
        </div>
    </el-drawer>
  </div>
</template>

<script>
import selectPople from './selectSaler'
import selectAgent from './selectAgent'
import seleteProject from './seleteProject'
import TimeSelect from '@/HDrpManagement/projectChange/components/TimeSelect'
import { log } from '@antv/g2plot/lib/utils'

export default {
  name: '',
  components:{selectPople,TimeSelect,seleteProject,selectAgent},
  data () {
    return {
      drawer:false,
      agentVisible:false,
      salerVisible:false,
      projectVisible:false,
      accountVisible:false,
      form: {
        "sa_contractid": 0,
        "sys_enterpriseid": "",
        "enterprisename":'',
        "projectname":'',
        "begdate": "",
        "enddate": "",
        "sa_projectid": "", //可选
        "type": "", //可选
        "discountrate": '', //可选
        "saler_hrid": '', //可选
        "signdate": "", //可选
        "signby": "", //可选
        "kickback": "", //可选
        "remarks": "", //可选
        "title": "",
        "signamount":'',
        "salername":'',
        "enterprisename":'',
        "sys_printmodelid": '',//可选
        "typemx":""//可选
      },
      rules: {
        sys_enterpriseid: [
          { required: true, message: '请选择经销商', trigger: 'blur' },
        ],
        begdate: [
          { required: true, message: '请选择生效日期', trigger: 'blur' },
        ],
        sa_projectid: [
          { required: true, message: '请选择项目', trigger: 'change' },
        ],
        signamount: [
          { required: true, message: '请填写签约金额', trigger: 'change' },
        ],
        saler_hrid: [
          { required: true, message: '请选择业务员', trigger: 'change' },
        ],
        enterprisename: [
          { required: true, message: '请选择客户', trigger: 'change' },
        ],
        signdate: [
          { required: true, message: '请填写签约金额', trigger: 'change' },
        ],
        kickback: [
          { required: true, message: '请填写佣金比例', trigger: 'change' },
        ],
        enterprisename: [
          { required: true, message: '请选择经销商', trigger: 'change' },
        ],
      },
      salerListParams: {
        "id": 20221122153902,
        "content": {
            "pageNumber": 1,
            "pageSize": 20,
            "where": {
                "condition": ""
            }
        },
      },
      agentListPrams: {
        "id": 20220920083901,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
              "condition": "",
              "type":1,
          }
        }
      },
      accountListPrams: {
        "id": 20220920083901,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
              "condition": "",
              "type":2,
          }
        }
      }
    };
  },
  computed: {
  },
  watch: {
  },
  created () {
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      let res = await this.$api.requested({
        "id": 20221121195102,
        "content": {
            "sa_contractid": this.$route.query.id
        },
      })
      this.form = Object.assign({},this.form,res.data)
      this.$refs.TimeSelect.time = [this.form.begdate,this.form.enddate]
    },
    async onSubmit () {
      this.$refs.form.validate(async val => {
        if (val) {
          if (this.$route.query.type == '直销项目') {
            this.form.type = '项目'
            this.form.typemx = '直销'
          } else if (this.$route.query.type == '经销项目') {
            this.form.type = '项目'
            this.form.typemx = '经销'
          } else {
            this.form.type = this.$route.query.type
          }
          let res = await this.$api.requested({
            "id":20221121185302,
            "content": this.form
          })
          this.tool.showMessage(res,() => {
            this.$refs.form.resetFields()
            this.drawer = false
            this.$emit('onSuccess')
          })
        }
      })
    },
    onCancel () {
      this.drawer = false
      this.$refs.form.resetFlieds()
    },
    agentChange (data) {
      this.form.sys_enterpriseid = data[0].sys_enterpriseid
      this.form.enterprisename = data[0].enterprisename   
      this.agentVisible = false 
    },
    salerChange (data) {
      this.form.saler_hrid = data[0].hrid
      this.form.salername = data[0].name   
      this.salerVisible = false 
    },
    projectChange (data) {
      this.form.projectname = data.projectname
      this.form.sa_projectid = data.sa_projectid
      this.projectVisible = false
    },
    accountChange (data) {
      this.form.enterprisename = data[0].enterprisename
      this.form.sys_enterpriseid = data[0].sys_enterpriseid
      this.accountVisible = false
    },
    centerChange (data) {
      this.form.enterprisename = data[0].enterprisename
      this.form.sys_enterpriseid = data[0].sys_enterpriseid
      this.agentVisible = false
    },
    clearTime () {

    },
    timeChange (time) {
      this.form.begdate = time[0]
      this.form.enddate = time[1]
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.header_info {
  background: #ffffff;
  padding: 16px 16px 0 16px;
  margin-bottom: 16px;
}
/deep/.el-select,.el-input,.el-date-editor {
  width: 100% !important;
}
</style>