byte-sailing-vue/src/views/process/processNode/index.vue

<template>
  <div class="video-setting">
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header">
            <span>{{ $t('process.processList') }}</span>
          </div>
          <from-render ref="req" v-model="req" :form-config="queryForm"></from-render>

          <el-table :data="tableList" v-loading="loading">
            <el-table-column :label="$t('process.generalProcess.serviceName')" prop="serviceName" width="300" />
            <el-table-column :label="$t('process.generalProcess.moduleName')" prop="moduleName" width="300" />
            <el-table-column :label="$t('process.generalProcess.codeName')" prop="name" />
            <el-table-column :label="$t('process.generalProcess.version')" align="center" width="120">
              <template slot-scope="scope">
                <span style="color: #409eff; cursor: pointer" @click="handleVersion(scope.row)">v{{ scope.row.versionNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('operation')" align="center" width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="handleNewVersion(scope.row)">{{ $t('process.generalProcess.newVersion') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="req.pageNum" :limit.sync="req.pageSize" @pagination="getList" />

          <el-dialog :title="$t('process.generalProcess.add')" :visible.sync="open" width="30%">
            <from-render ref="form" v-model="dialogParams" :form-config="dialogForm" :insideRules="dialogRules"></from-render>
          </el-dialog>

          <el-dialog :title="$t('process.generalProcess.change')" v-if="openChange" :visible.sync="openChange" width="30%">
            <div style="padding: 0 2vw">
              <el-form ref="rowData" :model="rowData" label-width="auto">
                <el-form-item label="业务服务">
                  <span>{{ rowData.serviceName }}</span>
                </el-form-item>
                <el-form-item label="模块名称">
                  <span>{{ rowData.moduleName }}</span>
                </el-form-item>
                <el-form-item label="流程名称">
                  <span>{{ rowData.name }}</span>
                </el-form-item>
                <el-form-item label="切换版本">
                  <el-select v-model="rowData.id" placeholder="请选择" style="width: 100%" size="small">
                    <el-option v-for="item in versionList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-form>
              <div style="padding-top: 8px; text-align: center">
                <el-button size="mini" @click="openChange = false">取 消</el-button>
                <el-button type="primary" size="mini" @click="handleSubmit">确定</el-button>
              </div>
            </div>
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as API from '@/api/process/processNode.js'
import { getServiceNameList, processInfoList } from '@/api/process/generalProcess.js'
import fromRender from '@/components/form-test/index.vue'

export default {
  name: 'equipment-management',
  components: { fromRender },
  data() {
    return {
      req: {
        pageNum: 1,
        pageSize: 10,
        keyword: '',
        serviceName: '',
      },
      queryForm: {
        keyword: {
          label: this.$t('keyword'),
          span: 4,
        },
        serviceName: {
          span: 4,
          label: this.$t('process.generalProcess.serviceName'),
          type: 'select',
          data: [],
          keyName: 'id',
          labelName: 'name',
        },
        operation: {
          // 搜索按钮操作
          query: () => {
            this.req.pageNum = 1
            this.getList()
          },
          // 重置按钮操作
          reset: () => {
            this.$refs.req.reset()
            this.getList()
          },
        },
        otherButton: {
          list: [
            {
              name: this.$t('process.generalProcess.add'),
              methodsText: 'add',
              type: 'primary',
              add: () => {
                this.open = true
              },
            },
          ],
        },
      },
      tableList: [],
      total: 0,
      loading: false,
      open: false,
      title: '',
      dialogParams: {
        serviceName: '',
        processInfoId: '',
        name: '',
      },
      dialogForm: {
        loadingStatus: false,
        serviceName: {
          label: this.$t('process.generalProcess.serviceName'),
          type: 'select',
          data: [],
          keyName: 'id',
          labelName: 'name',
          change: (val) => {
            this.dialogParams.processInfoId = ''
            processInfoList({ serviceName: val }).then((res) => {
              this.dialogForm.processInfoId.data = res.data.data.map((item) => {
                return {
                  id: item.id,
                  name: item.moduleName,
                  flowName: item.flowName,
                }
              })
            })
          },
        },
        processInfoId: {
          label: this.$t('process.generalProcess.moduleName'),
          type: 'select',
          data: [],
          keyName: 'id',
          labelName: 'name',
          change: (val) => {
            let data = this.dialogForm.processInfoId.data.filter((item) => item.id === val)
            if (data && data.length > 0) {
              this.dialogParams.name = data[0].flowName
            }
          },
        },
        name: {
          label: this.$t('process.generalProcess.flowName'),
          type: 'input',
        },
        otherButton: {
          align: 'center',
          list: [
            {
              name: this.$t('cancelText'),
              methodsText: 'cancel',
              cancel: () => {
                this.$refs.form.reset()
                this.open = false
              },
            },
            {
              name: this.$t('submitText'),
              methodsText: 'submit',
              type: 'primary',
              submit: () => {
                this.handleSubmit()
              },
            },
          ],
        },
      },
      dialogRules: {
        serviceName: [{ required: true, message: this.$t('process.generalProcess.serviceNameRules'), trigger: 'change' }],
        processInfoId: [{ required: true, message: this.$t('process.generalProcess.moduleNameRules'), trigger: 'blur' }],
        name: [{ required: true, message: this.$t('process.generalProcess.flowNameRules'), trigger: 'blur' }],
      },
      rowData: {},
      openChange: false,
      versionList: [],
    }
  },
  created() {
    this.getServiceName()
  },
  mounted() {
    this.getList()
  },
  watch: {},
  methods: {
    getServiceName() {
      getServiceNameList({}).then((res) => {
        const listData = []
        for (let i = 0; i < res.data.data.length; i++) {
          const element = res.data.data[i]
          listData.push({
            name: element,
            id: element,
          })
        }
        this.dialogForm.serviceName.data = listData
        this.queryForm.serviceName.data = listData
      })
    },
    getList() {
      this.loading = true
      API.processList({
        ...this.req,
        bindingTenantId: '000000',
      }).then(
        (res) => {
          this.total = res.data.data.total
          this.tableList = res.data.data.records
          this.loading = false
        },
        (err) => {
          console.log('processList: ' + err)
          this.loading = false
        },
      )
    },
    handleSubmit() {
      this.$refs.form.$refs['form'].validate((valid) => {
        if (valid) {
          this.dialogForm.loadingStatus = true
          API.processAdd({
            ...this.dialogParams,
            bindingTenantId: '000000',
          }).then(
            () => {
              this.msgSuccess(this.$t('addSuccess'))
              this.$refs.form.reset()
              this.open = false
              this.dialogForm.loadingStatus = false
              this.getList()
            },
            (err) => {
              console.log('processAdd: ' + err)
              this.dialogForm.loadingStatus = false
            },
          )
        }
      })
    },
    handleVersion(row) {
      this.rowData = JSON.parse(JSON.stringify(row))
      this.openChange = true
      API.processGetVersionByProcessInfoId({ bindingTenantId: '000000', processInfoId: row.processInfoId }).then((res) => {
        console.log(res)
        this.versionList = res.data.data.map((item) => {
          return {
            id: item.id,
            name: 'v' + item.versionNumber,
          }
        })
      })
    },
    handleNewVersion(row) {
      this.$router.push({
        path: '/nodeConfig',
        query: {
          id: row.id,
          processInfoId: row.processInfoId,
        },
      })
    },
    handleSubmit() {
      if (!this.rowData.id) {
        return this.msgInfo(this.$t('process.node.selectVersion'))
      }
      API.processEditVersion({ processInfoId: this.rowData.processInfoId, bindingTenantId: '000000', id: this.rowData.id }).then(() => {
        this.openChange = false
        this.msgSuccess(this.$t('process.node.switchSuccess'))
        this.getList()
      })
    },
  },
}
</script>
  
  <style lang="scss" scoped>
.box-card {
  height: calc(100vh - 60px);
  overflow-y: auto;
}
::v-deep {
  .el-form-item {
    margin-bottom: 8px;
  }
}
</style>