yos_web/src/Form/publicManage/edit.vue

<template>
  <div>
    <el-button size="mini" type="text" @click="editBtn">编 辑</el-button>
    <el-drawer append-to-body title="编辑" :visible.sync="dialogFormVisible" size="800px">
      <div class="drawer__panel">
      <span style="font-weight:bold">基本信息</span>
      <el-divider></el-divider>
      <div style="padding:16px 0;display:flex;flex-direction:column">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px"
          label-position="right" size="mini">
          <el-col :span="24">
            <el-form-item label="公海名称" prop="poolname">
              <el-input v-model="form.poolname" placeholder="请输入池名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="公海成员">
              <scopeOfauth :onlyread="true" :defaultData="defaultData" scrollHeight="200px"
                obiectName="sa_customerpool" appidname="sa_customerpoolid" :dataid="dataid" @onChecked="onChecked">
              </scopeOfauth>
            </el-form-item>
          </el-col>
          <span style="font-weight:bold">规则设置</span>
          <el-divider></el-divider>
          <el-col :span="24">
          <el-form-item label="分配领取规则" prop="freeget">
            <el-radio-group v-model="form.freeget">
              <el-radio :label="1">成员可见可领取，管理员可分配</el-radio>
              <el-radio :label="0">成员可见不可领取，管理员可分配</el-radio>
            </el-radio-group>
          </el-form-item>
          </el-col>
          <el-col :span="24">
          <el-form-item label="保有规则" prop="isopentenure">
            <el-radio-group v-model="form.isopentenure">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          </el-col>
          <el-col :span="24">
          <el-form-item label="自动回收规则" prop="datafollowlimit">
            <div>
              <el-radio-group v-model="form.isopenrecovery">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </div>
            <div v-show="form.isopenrecovery == 1">
              <div><el-input size="mini" style="width:50px;margin-right:10px" v-model="form.datafollowlimit" />天，未跟进，自动回收至公海，负责人清空</div>
              <div><el-input size="mini" style="width:50px;margin-right:10px" v-model="form.deallimit" />天，未成交，自动回收至公海，负责人清空</div>
            </div>
          </el-form-item>
            <el-form-item label="是否默认公海" prop="aa">
              <div>
                <el-radio-group v-model="form.aa" :disabled="form.isdefault === 1">
                  <el-radio :label="1">开启</el-radio>
                  <el-radio :label="0" >关闭</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-form-item label="是否启用" prop="isused">
              <div>
                <el-radio-group v-model="form.isused">
                  <el-radio :label="1">开启</el-radio>
                  <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
          </el-col>
        </el-form>
         <el-alert
          type="warning">
          <div slot="title">
            <p>分享退回规则:</p>
            <p>成员领取后可分享客户至公海(可选公海),分享不清空负责人</p>
            <p>成员退回客户至公海（原路退回:若公海作废，则退回至默认公海），退回清空负责人</p>
          </div>
        </el-alert>
      </div>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import scopeOfauth from '@/HDrpManagement/publicManage/components/scopeOfAuthority/index'
export default {
  name: "add",
  props:['data'],
  components: { scopeOfauth },
  data () {
    return {
      dialogFormVisible: false,
      authData: '',
      defaultData: [],
      dataid: '',
      form: {
        "aa":0,
        "sa_customerpoolid": 0,
        "poolname": "", //池名称
        "freeget": 0, //自由领取
        "isused": 1, //是否启用
        "remarks": "",
        "isopentenure":0,
        "countlimit": 0, //成员最大保有客户数（0表示不设限）
        "isopenrecovery":0,
        "datafollowlimit": 0, //跟进天数限制（超过天数后自动退回，0表示不设限）
        "deallimit": 0, //成交天数限制（超过天数后自动退回，0表示不限制）
        "isdefault": 1 //是否默认
      },
      rules: {
        poolname: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        freeget: [
          { required: true, message: '请选择领取规则', trigger: 'blur' }
        ],
        datafollowlimit: [
          { required: true, message: '请填写回收数据', trigger: 'blur' }
        ],
        deallimit: [
          { required: true, message: '请填写回收数据', trigger: 'blur' }
        ],
        isopentenure: [
          { required: true, message: '请输入数据', trigger: 'blur' }
        ],
        aa: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        isused: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
      }
    }
  },
  provide () {
    return {
      rowData: () => ''
    }
  },
  created () {
  },
  methods: {
    editBtn () {
      this.dialogFormVisible = true
      this.form = Object.assign({},this.form,this.data)
      console.log(this.form);
      this.form.aa = this.form.isdefault
      this.getdefaultData()
    },
    async getdefaultData () {
      let res = await this.$api.requested({
        "id": 20221022135202,
        "content": {
            "sa_customerpoolid":this.data.sa_customerpoolid
        }
      })
      this.defaultData = res.data
    },
    // 获取保存授权范围数据
    onChecked (param) {
      this.authData = param
      console.log(this.authData);
    },
    onSubmit () {
      this.form.isdefault = this.form.aa
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        if (!this.authData) {
          this.$alert('还未授权范围，是否直接无视', '提示', {
            confirmButtonText: '确定',
            callback: async action => {
              if (action == 'confirm') {
                const res = await this.$api.requested({
                  "id": "20221009100502",
                  "version": 1,
                  "content": this.form
                })
                if (this.authData) {
                  this.authData.sa_customerpoolid = res.data.sa_customerpoolid
                  const res2 = await this.$api.requested({
                    "id": "20221022111502",
                    "content": this.authData
                  })
                }
                this.tool.showMessage(res, () => {
                  this.$emit('onSuccess')
                  this.$refs['form'].resetFields();
                  this.dialogFormVisible = false
                })
              }
            }
          })
        } else {
          const res = await this.$api.requested({
            "id": "20221009100502",
            "version": 1,
            "content": this.form
          })
          if (this.authData) {
            this.authData.sa_customerpoolid = res.data.sa_customerpoolid
            const res2 = await this.$api.requested({
              "id": "20221022111502",
              "content": this.authData
            })
          }
          this.tool.showMessage(res, () => {
            this.$emit('onSuccess')
            this.$refs['form'].resetFields();
            this.activeName = '基本信息'
            this.dialogFormVisible = false
          })
        }

      })
    },
  }
}
</script>

<style scoped>
.tab p {
  flex: 1;
  height: 39px;
  line-height: 39px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  color: #999;
  border-bottom: 2px solid #eeeeee;
  cursor: pointer;
}
.tab-act {
  color: #3874f6 !important;
  border-bottom: 2px solid #3874f6 !important;
}
/deep/.el-divider {
  margin: 15px 0;
}
</style>