vue-apps/com.actionsoft.apps.coe.pal/views/workspace/WorkspaceUpdate.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal=false
    width="450px"
    :before-close="handleClose" class="workspace-update">
    <div style="border: 1px solid #F2F2F2;padding: 0px 10px 10px 10px;">
      <awsui-form ref="ruleForm" :model="ruleForm" label-position="top" :rules="rules">
        <awsui-form-item label="名称" prop="name">
          <awsui-input v-model="ruleForm.name" placeholder="公司名称或项目名称" maxlength="36" :validate-event=false></awsui-input>
        </awsui-form-item>
        <awsui-form-item label="描述">
          <awsui-input v-model="ruleForm.desc" type="textarea" placeholder="请输入描述" maxlength="255" show-word-limit></awsui-input>
        </awsui-form-item>
        <awsui-form-item label="管理员" prop="admin">
          <awsui-select v-model="ruleForm.admin" :options="adminOptions" multiple placeholder="请选择管理员" :validate-event=false @change="updateAdminData"></awsui-select>
        </awsui-form-item>
        <awsui-form-item label="分类方法">
          <div>
            <el-radio-group fill="#4E7FF9" v-model="ruleForm.type" size="mini" :disabled="wsId != ''">
              <el-tooltip class="item" effect="dark" placement="bottom-start">
                <span slot="content">二分法流程分为"核心经营流程"和"支持管理流程"</span>
                <el-radio-button label="二分法"></el-radio-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" placement="bottom-start">
                <span slot="content">三分法流程分为"战略流程"、"运营流程"和"支持流程"</span>
                <el-radio-button label="三分法"></el-radio-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" placement="bottom-start">
                <span slot="content">可自己定义流程结构</span>
                <el-radio-button label="自定义"></el-radio-button>
              </el-tooltip>
            </el-radio-group>
          </div>
        </awsui-form-item>
      </awsui-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <awsui-button class="button-general-color" :disabled="buttonDisabled" type="primary" @click="save">确定</awsui-button>
      <awsui-button @click="cancel()">取消</awsui-button>
    </span>
  </el-dialog>
</template>

<script>
    import awsuiAxios from "../../awsuiAxios";

    export default {
      name: "WorkspaceUpdate",
      data() {
        return {
          title : '新建资产库',
          buttonDisabled : false,
          wsId : '',
          dialogVisible : false,
          adminOptions : [],
          obj : null,// 其他vue页面传递过来的this，可以执行相应回调函数
          ruleForm: {
            name : '',
            desc : '',
            admin : '',
            type : '二分法',
          },
          rules: {
            name: [{ required: true, message: '请输入资产库名称', trigger: 'blur' }],
            admin: [{ required: true, message: '请选择管理员', trigger: 'change' }]
          }
        }
      },
      mounted() {
      },
      methods : {
        openUpdateWsDlg(action, wsId, obj) {
          if (action == 'create') {
            this.title = '新建资产库';
            this.obj = obj;
          } else {
            this.title = '修改资产库';
            this.wsId = wsId;
            this.obj = obj;
          }
          this.initData();
          this.dialogVisible = true;
        },
        cancel() {
          this.$refs['ruleForm'].resetFields();
          this.buttonDisabled = false;
          this.dialogVisible = false;
        },
        handleClose(done) {
          this.buttonDisabled = false;
          this.$refs['ruleForm'].resetFields();
          done();
        },
        initData() {// 初始化数据
          const that = this;
          // 查询资产库数据,若新建只查询用户，若更新，查询所有的，wsId是否有值为判断依据
          const data = {
            url:'jd',
            data:{
              cmd : 'com.actionsoft.apps.coe.pal_ws_update_data_query',
              wsId : that.wsId
            }
          };
          awsuiAxios.post(data).then(function (ro) {
            if (ro.result == 'ok') {
              let data = ro.data;
              that.ruleForm.name = data.name;
              that.ruleForm.type = data.type == 0 ? "二分法" : data.type == 1 ? "三分法" : "自定义";
              that.ruleForm.desc = data.desc;
              that.ruleForm.admin = data.admin;
              that.adminOptions = data.adminOptions;
            } else {
              that.$message.error(ro.msg);
            }
          }).catch(error=>{
            console.log(error);
          })
        },
        updateAdminData(val) {
          this.ruleForm.admin = val;
        },
        save() {
          const that = this;
          // 名称，管理员，描述
          const name = that.ruleForm.name;
          const desc = that.ruleForm.desc;
          const admin = that.ruleForm.admin;
          if (name == "") {
            that.$message({message: '[名称]不允许为空',type: 'warning'});
            return;
          }
          if (name.length > 36) {
            that.$message({message: '[名称]不允许超过36个字',type: 'warning'});
            return;
          }
          if (desc.length > 255) {
            that.$message({message: '[描述]不允许超过255个字符',type: 'warning'});
            return;
          }
          if (admin.length == 0) {
            that.$message({message: '[管理员]不允许为空',type: 'warning'});
            return;
          }
          that.buttonDisabled = true;

          const data = {
            url:'jd',
            data:{
              cmd : 'com.actionsoft.apps.coe.pal_ws_update_save',
              wsId : that.wsId,
              name : that.ruleForm.name,
              type : that.ruleForm.type == '二分法' ? 0 : that.ruleForm.type == '三分法' ? 1 : 2,
              desc : that.ruleForm.desc,
              admin : that.ruleForm.admin.join(',')
            }
          };
          awsuiAxios.post(data).then(function (ro) {
            if (ro.result == 'ok') {
              that.$message({
                message: ro.msg,
                duration: 2000,
                type: 'success'
              });
              that.cancel();
              if (that.obj != null) {
                that.obj.updateWorkspaceCallback();
              }
            } else {
              that.$message.error(ro.msg);
            }
            that.buttonDisabled = false;
          }).catch(error=>{
            console.log(error);
          })
        }
      }
    }
</script>

<style scoped>
  .inline-block {
    display: inline-block;
  }
  .label-padding {
    padding-bottom: 8px;
    padding-top: 8px;
  }
  .workspace-update >>> .el-dialog__body {
    padding: 10px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
</style>