supervise/supervise-portal-ui/src/views/copyofprocess/liuchengchaosongAdd.vue

<template>
  <div class="app-container">
    <div>
      <!--标题按钮部分开始-->
      <div class="tab-header webtop">
        <!--标题-->
        <div>{{ viewTitle }}</div>
        <!--start 添加修改按钮-->
        <div>
          <el-button type="primary" size="small" :disabled="submitdisabled" @click="save()">保存
          </el-button>
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <!--标题按钮部分结束-->
      <!--Start 新增修改部分-->
      <div class="listconadd">
        <el-form ref="form_obj" :model="formobj" :rules="rules" class="formadd">
          <el-row style="border-top: 1px solid #E0E3EB">
            <el-col :span="4" class="tleftb">
              <span><span class="icon">*</span>流程名称</span>
            </el-col>
            <el-col :span="20">
              <el-form-item prop="flowName">
                <el-select v-model="formobj.flowName" placeholder="请选择" @change="changeFlow" filterable>
                  <el-option v-for="item in flow_list" :key="item.key" :label="item.name" :value="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="tleftb">
              <span>角色</span>
            </el-col>
            <el-col :span="20">
              <el-form-item>
                <el-select v-model="recipientList" placeholder="请选择" filterable multiple>
                  <el-option v-for="item in role_list" :key="item.sid" :label="item.name" :value="item.sid"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchSid, save, roleList } from '@/api/system/liuchengchaosong/liuchengchaosong'
import {pullDown, selectFlowList} from '@/api/system/postManage/index'

export default {
  name: 'liuchengchaosongAdd',
  data() {
    return {
      viewTitle: '',
      index: 0,
      tableKey: 0,
      role_list: [],
      flow_list: [],
      recipientList: [],
      // 表单数据
      formobj: {
        sid: '', // 一条数据的sid
        flowName: '',
        flowKey: '',
        roleNames: [],
        roleSids: []
      },
      rules: {
        flowName: [{ required: true, message: '流程名称不能为空', trigger: 'change' }]
      },
      submitdisabled: false
    }
  },
  methods: {
    init() {
      roleList({}).then((res) => {
        if (res.success) {
          this.role_list = res.data
        }
      })
      selectFlowList().then((res) => {
        if (res.success) {
          this.flow_list = res.data
        }
      })
    },
    showAdd() {
      this.init()
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      this.viewTitle = '【新增】流程抄送'
    },
    showEdit(row) {
      this.init()
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      this.viewTitle = '【设置】流程抄送'
      console.log('编辑回显', row.sid)
      fetchSid(row.sid).then((resp) => {
        this.formobj = resp.data
        this.recipientList = this.formobj.roleSids
      }).catch((e) => {
        this.formobj = row
      })
    },
    changeFlow(value) {
      const choose = this.flow_list.filter((item) => item.name === value)
      this.formobj.flowKey = choose[0].key
    },
    save() {
      console.log(this.formobj)
      if (this.recipientList.length === 0) {
        this.$message({ showClose: true, type: 'error', message: '角色不能为空' })
        return
      } else {
        const aa = []
        const bb = []
        for (var i = 0; i < this.recipientList.length; i++) {
          for (var k = 0; k < this.role_list.length; k++) {
            if (this.recipientList[i] === this.role_list[k].sid) {
              aa.push(this.role_list[k].name)
              bb.push(this.role_list[k].sid)
            }
          }
        }
        this.formobj.roleNames = aa
        this.formobj.roleSids = bb
      }
      this.$refs['form_obj'].validate((valid) => {
        if (valid) {
          this.submitdisabled = true
          save(this.formobj).then((resp) => {
            if (resp.success) {
              this.$message({ showClose: true, type: 'success', message: '保存成功' })
              this.handleReturn('true')
            }
          }).catch(() => {
            this.submitdisabled = false
          })
        } else {
          return false
        }
      })
    },
    // 返回（===既判断）
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      // 表单数据
      this.formobj = {
        sid: '', // 一条数据的sid
        flowName: '',
        flowKey: '',
        roleNames: [],
        roleSids: []
      }
      this.recipientList = []
      this.submitdisabled = false
      this.$refs['form_obj'].resetFields()
      this.$emit('doback')
    }
  }
}
</script>
<style scoped>
.title {
  padding: 7px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>