yos_web/src/HDrpManagement/serveWorkBillTask/components/edit.vue

<template>
  <div>
    <el-button size="mini" type="primary" @click="editBtn">编 辑</el-button>
    <el-drawer :show-close="false" append-to-body :visible.sync="dialogFormVisible" size="500px">
      <div slot="title" style="font-size: 15px">
        编辑服务工作项
      </div>
      <div class="drawer__panel">
        <el-row :gutter="20">
          <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="workname">
                <el-input type="textarea" v-model="form.workname" placeholder="请输入工作名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="操作说明" prop="remarks">
                <el-input type="textarea" v-model="form.remarks" placeholder="请输入操作说明"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="上传附件" prop="fileupload">
                <el-radio-group v-model="form.fileupload">
                  <el-radio :label="11">必填</el-radio>
                  <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="textedit">
                <el-radio-group v-model="form.textedit">
                  <el-radio :label="11">必填</el-radio>
                  <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="contractupload">
                <el-radio-group v-model="form.contractupload">
                  <el-radio :label="11">必填</el-radio>
                  <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="additem">
                <el-radio-group v-model="form.additem">
                  <el-radio :label="11">必填</el-radio>
                  <el-radio :label="1">非必填</el-radio>
                  <el-radio :label="0">无</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.additem">
              <el-form-item label="商品类型" prop="itemtype">
                <el-radio-group v-model="form.itemtype">
                  <el-radio label="服务商品">服务商品</el-radio>
                  <el-radio label="培训物料">培训物料</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="添加人员" prop="addperson">
                <el-radio-group v-model="form.addperson">
                  <el-radio :label="11">必填</el-radio>
                  <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="amountpay">
                <el-radio-group v-model="form.amountpay">
                  <el-radio :label="11">必填</el-radio>
                  <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="confirm">
                <el-radio-group v-model="form.confirm">
                  <el-radio :label="11">必须确认</el-radio>
                  <el-radio :label="1">可确认</el-radio>
                  <el-radio :label="0">不需要</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.confirm">
              <el-form-item label="确认项" prop="confirm_options">
                <el-tag
                  size="small"
                  :key="tag"
                  v-for="tag in dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)">
                  {{tag}}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="mini"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="mini" @click="showInput">+ New Tag</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="是否验证工作" prop="required">
                <el-radio-group v-model="form.required">
                  <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="signature">
                <el-radio-group v-model="form.signature">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </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>
export default {
  name: "add",
  props:['data'],
  data(){
    return {
      dialogFormVisible:false,
      form:{
        "sa_workpresetid":0,     //sa_brandid<=0时 为新增
        "additem":0,
        "addperson":0,
        "workname":"",
        "remarks":"",
        "itemtype":"",
        "contractupload":0,
        "fileupload":0,
        "textedit":0,
        "confirm":0,
        "amountpay":0,
        "required":0,
        "signature":0,
        "confirm_options":"['是','否']"
      },
      rules:{
        workname:[
          { required: true, message: '请输入工作名', trigger: 'blur'},
        ]
      },
      dynamicTags: ['是', '否'],
      inputVisible: false,
      inputValue: ''
    }
  },
  methods:{
    editBtn () {
      this.dialogFormVisible = true
      this.form = Object.assign({},this.form,this.data)
    },
    onSubmit(){
      console.log(this.form)
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        this.form.confirm_options = this.dynamicTags
        const res = await this.$api.requested({
          "id": "20230207132603",
          "version":1,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.$refs['form'].resetFields();
          this.dialogFormVisible = false
        })
      })
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  margin-top: 0;
}
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>