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

<template>
  <div>
    <el-button @click="editBtn" :disabled="disabled" size="mini">编 辑</el-button>
    <el-drawer size="30%" :with-header="false" append-to-body :visible.sync="drawer" v-if="form.sa_contractid">
      <p class="normal-title normal-panel" style="border-bottom:1px solid #cccccc;padding:16px">编辑{{$route.query.type == '框架' ? '经销商合作' : $route.query.type}}合同</p>
      <div class="container normal-panel">
        <!--合作协议-->
        <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="title">
                <el-input type="text" size="small" v-model="form.title"></el-input>
              </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="salername">
                  <el-input disabled type="text" size="small" v-model="form.salername"></el-input>
              </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="打印模板:">
                <el-input disabled type="text" size="small" :value="$route.query.type == '框架' ? '经销合作' : $route.query.type"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同描述:" prop="remarks">
                <el-input type="textarea" 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="title">
                <el-input type="text" size="small" v-model="form.title"></el-input>
              </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="salername">
                  <el-input disabled type="text" size="small" v-model="form.salername"></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="签约日期:" 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" disabled size="small" placeholder="产品清单总额(自动计算)" v-model="form.signamount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="打印模板:">
                <el-input disabled type="text" size="small" :value="$route.query.type == '框架' ? '经销合作' : $route.query.type"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同描述:" prop="hrid">
                <el-input type="textarea" 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="title">
                <el-input type="text" size="small" v-model="form.title"></el-input>
              </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="salername">
                  <el-input disabled type="text" size="small" v-model="form.salername"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="签约日期:" prop="signdate">
                <el-date-picker
                  v-model="form.signdate"
                  value-format="yyyy-MM-dd"
                  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" disabled size="small" placeholder="产品清单总额(自动计算)" v-model="form.signamount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="打印模板:">
                <el-input disabled type="text" size="small" :value="$route.query.type == '框架' ? '经销合作' : $route.query.type"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同描述:" prop="hrid">
                <el-input type="textarea" 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="title">
                <el-input type="text" size="small" v-model="form.title"></el-input>
              </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="salername">
                  <el-input disabled type="text" size="small" v-model="form.salername"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="签约日期:" prop="signdate">
                <el-date-picker
                  v-model="form.signdate"
                  value-format="yyyy-MM-dd"
                  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" v-model="form.signamount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="打印模板:">
                <el-input disabled type="text" size="small" :value="$route.query.type == '框架' ? '经销合作' : $route.query.type"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同描述:" prop="hrid">
                <el-input type="textarea" 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="title">
                <el-input type="text" size="small" v-model="form.title"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="居间服务商:" prop="sys_enterpriseid">
                <el-popover
                  placement="bottom"
                  trigger="manual"
                  v-model="accountVisible"
                  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=true" 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="salername">
                  <el-input disabled type="text" size="small" v-model="form.salername"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="签约日期:" prop="signdate">
                <el-date-picker
                  v-model="form.signdate"
                  value-format="yyyy-MM-dd"
                  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="24">
              <el-form-item label="打印模板:">
                <el-input disabled type="text" size="small" :value="$route.query.type == '框架' ? '经销合作' : $route.query.type"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同描述:" prop="hrid">
                <el-input type="textarea" size="small" v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
        <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 selectModel from './seleteModel'
import TimeSelect from '@/HDrpManagement/projectChange/components/TimeSelect'
import { log } from '@antv/g2plot/lib/utils'

export default {
  props:['data','disabled'],
  name: '',
  components:{selectPople,TimeSelect,seleteProject,selectAgent,selectModel},
  data () {
    var checkNumber = (rule, value, callback) => {
      if (typeof +value != 'number') {
        return callback(new Error('请填写数字'));
      }
      callback()
    }
    var NumberSize = (rule, value, callback) => {
      if (+value > 100 || +value < 1 && value) {
        return callback(new Error('折扣范围(1-100)'));
      }
      callback()
    }
    return {
      drawer:false,
      agentVisible:false,
      salerVisible:false,
      projectVisible:false,
      accountVisible:false,
      modelVisible: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' },
        ],
        salername: [
          { 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' },
        ],
        title: [
          { required: true, message: '请填写合同标题', trigger: 'blur' },
        ],
        discountrate: [
          { validator: checkNumber, trigger: 'blur'},
          { validator: NumberSize, trigger: 'blur'}
        ],
      },
      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 () {
  },
  methods: {
    editBtn () {
      this.form = Object.assign({},this.form,this.data)
      this.drawer = true
      this.$nextTick(() => {
        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
    },
    modelChange (data) {
      this.form.modelname = data.modelname
      this.form.sys_printmodelid = data.sys_printmodelid
      this.modelVisible = 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>