Source/UBCS-WEB/src/components/template/FlowPath.vue

@@ -1,120 +1,124 @@
<template>
        <avue-crud ref="crud" :table-loading="loading" :data="data" v-model="form" :option="option" :page.sync="page"
            :search.sync="search" @on-load="getDataList" @row-save="handleSave" @row-del="handleDelete"
            @row-update="handleEdit" @refresh-change="handleRefresh" @size-change="handleSizePage"
            @current-change="handleCurrentPage" v-if="Formlist.length>0">
        </avue-crud>
  <div>
    <avue-crud v-if="Formlist.length>0" ref="crud" v-model="form" :data="data" :option="option" :page.sync="page"
               :search.sync="search" :table-loading="loading" @on-load="getDataList" @row-save="handleSave"
               @row-del="handleDelete" @row-update="handleEdit" @refresh-change="handleRefresh"
               @size-change="handleSizePage" @current-change="handleCurrentPage">
    </avue-crud>
  </div>

</template>

<script>
import { getFlowpathList, getStartList, flowpathSave, flowpathDelete } from '@/api/template/flowpath.js'
import {getFlowpathList, getStartList, flowpathSave, flowpathDelete} from '@/api/template/flowpath.js'

export default {
    name: 'FlowPath',
    props: {
      checkStatus: {
        type: Boolean,
        default: false
      },
      crudLCStatus: {
        type: String,
        default: 'Editing'
      },
      code: {
        typeof: String,
        required: true,
        default: ""
      },
      Formlist:{
        type:Array,
        default:[]
      }
  name: 'FlowPath',
  props: {
    checkStatus: {
      type: Boolean,
      default: false
    },
    data() {
        return {
            loading: false,
            page: {
                currentPage: 1,
                pageSize: 10,
                total: 0
    crudLCStatus: {
      type: String,
      default: 'Editing'
    },
    code: {
      typeof: String,
      required: true,
      default: ""
    },
    Formlist: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      loading: false,
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      search: {},
      delIds: [],
      data: [],
      startData: [],
      form: {},
      option: {
        height: 'auto',
        calcHeight: 20,
        border: true,
        align: 'center',
        menu: !this.checkStatus || this.crudLCStatus == 'Editing',
        menuAlign: 'center',
        index: true,
        searchMenuSpan: 8,
        searchBtn: false,
        refreshBtn: false,
        emptyBtn: false,
        columnBtn: false,
        editBtn: !this.checkStatus || this.crudLCStatus == 'Editing',
        delBtn: !this.checkStatus || this.crudLCStatus == 'Editing',
        addBtn: !this.checkStatus || this.crudLCStatus == 'Editing',
        defaultSort: {
          prop: 'id,name,description,version',
          order: 'descending'
        },
        column: [
          {
            label: '模板key',
            prop: 'modelKey',
            width: 120,
            sortable: true,
            type: 'tree',
            dicData: [],
            props: {
              label: "key",
              value: "key"
            },
            search: {},
            delIds: [],
            data: [],
            startData: [],
            form: {},
            option: {
              height: 340,
              border: true,
              align: 'center',
              menu:!this.checkStatus || this.crudLCStatus == 'Editing',
              menuAlign: 'center',
              index: true,
              searchMenuSpan: 8,
              searchBtn: false,
              refreshBtn:false,
              emptyBtn: false,
              columnBtn: false,
              editBtn:!this.checkStatus || this.crudLCStatus == 'Editing',
              delBtn:!this.checkStatus || this.crudLCStatus == 'Editing',
              addBtn: !this.checkStatus || this.crudLCStatus == 'Editing',
              defaultSort: {
                prop: 'id,name,description,version',
                order: 'descending'
              },
              column: [
                {
                  label: '模板key',
                  prop: 'modelKey',
                  width: 120,
                  sortable: true,
                  type: 'tree',
                  dicData: [],
                  props: {
                    label: "key",
                    value: "key"
                  },
                  rules: [{
                    required: true,
                    message: '模板key不能为空',
                    trigger: 'blur'
                  }],
                  nodeClick: (data) => {
                    console.log(data)
                    // 节点点击的时候会获取到数据
                    this.form.modelName = data.name
                  }
                }, {
                  label: '模板名称',
                  prop: 'modelName',
                  sortable: true,
                  width: 220,
                  addDisabled: true,
                  editDisabled: true,
                },
                {
                  label: '模板用途',
                  prop: 'buttonTypeKey',
                  type: 'tree',
                  width: 120,
                  dicUrl: '/api/ubcs-flow/processTS/tt',
                  dicMethod: 'post',
                  props: {
                    value: "codee",
                    label: "namee",
                  },
                },
                {
                  label: '模板描述',
                  prop: 'description',
                  type: 'textarea'
                },
              ]
            rules: [{
              required: true,
              message: '模板key不能为空',
              trigger: 'blur'
            }],
            nodeClick: (data) => {
              // 节点点击的时候会获取到数据
              this.form.modelName = data.name
            }
        }
    },
    created() {
        this.getStart()
    },
          }, {
            label: '模板名称',
            prop: 'modelName',
            sortable: true,
            width: 220,
            addDisabled: true,
            editDisabled: true,
          },
          {
            label: '模板用途',
            prop: 'buttonTypeKey',
            type: 'tree',
            width: 120,
            dicUrl: '/api/ubcs-flow/processTS/tt',
            dicMethod: 'post',
            props: {
              value: "codee",
              label: "namee",
            },
          },
          {
            label: '模板描述',
            prop: 'description',
            type: 'textarea'
          },
        ]
      }
    }
  },
  created() {
    this.getStart()
  },
  watch: {
    code: {
      handler(newval, oldval) {
@@ -123,133 +127,127 @@
    },
    checkStatus: {
      handler(newval, oldval) {
        this.option.delBtn=!this.checkStatus || this.crudLCStatus == 'Editing';
        this.option.editBtn=!this.checkStatus || this.crudLCStatus == 'Editing';
        this.option.addBtn=!this.checkStatus || this.crudLCStatus == 'Editing';
        this.option.delBtn = !this.checkStatus || this.crudLCStatus == 'Editing';
        this.option.editBtn = !this.checkStatus || this.crudLCStatus == 'Editing';
        this.option.addBtn = !this.checkStatus || this.crudLCStatus == 'Editing';
      }
    },
    crudLCStatus: {
      handler(newval, oldval) {
        this.option.delBtn=!this.checkStatus || this.crudLCStatus == 'Editing';
        this.option.editBtn=!this.checkStatus || this.crudLCStatus == 'Editing';
        this.option.addBtn=!this.checkStatus || this.crudLCStatus == 'Editing';
        this.option.delBtn = !this.checkStatus || this.crudLCStatus == 'Editing';
        this.option.editBtn = !this.checkStatus || this.crudLCStatus == 'Editing';
        this.option.addBtn = !this.checkStatus || this.crudLCStatus == 'Editing';
      }
    }
  },
    methods: {
        async getStart() {
            const response = await getStartList()
            if (response.status === 200) {
                console.log(response.data.data.records)
                const data = response.data.data.records
                let newData = data.map(item => {
                    const { key, name, version } = item
                    return { key, name, version }
                })
                this.option.column[0].dicData = newData
  methods: {
    async getStart() {
      const response = await getStartList()
      if (response.status === 200) {
        const data = response.data.data.records
        let newData = data.map(item => {
          const {key, name, version} = item
          return {key, name, version}
        })
        this.option.column[0].dicData = newData

            }
        },
        // 获取列表
        async getDataList() {
      }
    },
    // 获取列表
    async getDataList() {
      this.loading = false
      if (this.code) {
        const {pageSize, currentPage} = this.page
        let param = {size: pageSize, current: currentPage}
        const response = await getFlowpathList({...param, ...{templateId: this.code}})
        if (response.status === 200) {
          this.loading = false
          if(this.code){
            const { pageSize, currentPage } = this.page
            let param = { size: pageSize, current: currentPage }
            const response = await getFlowpathList({ ...param, ...{ templateId: this.code } })
            if (response.status === 200) {
              this.loading = false
              const data = response.data.data
              this.data = data.records
              this.page.total = data.total
            } else this.loading = false
          }else {
            this.data=[]
          }
          const data = response.data.data
          this.data = data.records
          this.page.total = data.total
        } else this.loading = false
      } else {
        this.data = []
      }

        },
        // 新增
        async handleSave(row, done, loading) {
            console.log(row)
            await flowpathSave({ ...row, ...{ templateId: this.code } }).then(response=>{
              if (response.status === 200) {
                console.log(response)
                this.$message({
                  type: 'success',
                  message: '新增数据成功！'
                })
                done()
                this.getDataList()
              }
            }).catch(res=>{
              loading()
            })
    },
    // 新增
    async handleSave(row, done, loading) {
      await flowpathSave({...row, ...{templateId: this.code}}).then(response => {
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: '新增数据成功！'
          })
          done()
          this.getDataList()
        }
      }).catch(res => {
        loading()
      })

        },
        // 编辑
        async handleEdit(row, index, done, loading) {
            console.log(row)
            const { modelName, modelKey, buttonTypeKey, id ,description} = row
            let param = { modelName, modelKey, buttonTypeKey, id,description }
            await flowpathSave({ ...param, ...{ templateId: this.code } }).then(response=>{
              if (response.status === 200) {
                this.$message({
                  type: 'success',
                  message: '修改数据成功！'
                })
                done()
                this.getDataList()
              }
            }).catch(()=>{
              //loading控制禁用 默认是开启
              loading()
            })
    },
    // 编辑
    async handleEdit(row, index, done, loading) {
      const {modelName, modelKey, buttonTypeKey, id, description} = row
      let param = {modelName, modelKey, buttonTypeKey, id, description}
      await flowpathSave({...param, ...{templateId: this.code}}).then(response => {
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: '修改数据成功！'
          })
          done()
          this.getDataList()
        }
      }).catch(() => {
        //loading控制禁用 默认是开启
        loading()
      })

        },
        // 删除单条
        handleDelete(row) {
            console.log(row)
            const { id } = row
            this.deleteSysInfo({ id: id })
        },
        // 删除接口
        deleteSysInfo(param) {
            this.$confirm('是否确定删除选择的模板流程?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 接口
                const response = await flowpathDelete(param)
                if (response.status === 200) {
                    console.log(response)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getDataList()
                }
            })
        },
        // enter搜索
        handleEnter() {
            if (this.search[this.selectValue] === '') return
            else this.getDataList()
        },
        // 输入框清空
        handleClear() {
    },
    // 删除单条
    handleDelete(row) {
      const {id} = row
      this.deleteSysInfo({id: id})
    },
    // 删除接口
    deleteSysInfo(param) {
      this.$confirm('是否确定删除选择的模板流程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 接口
        const response = await flowpathDelete(param)
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getDataList()
        }
      })
    },
    // enter搜索
    handleEnter() {
      if (this.search[this.selectValue] === '') return
      else this.getDataList()
    },
    // 输入框清空
    handleClear() {

        },
        // 刷新按钮
        handleRefresh() {
            this.getDataList()
        },
        handleSizePage(event) {
            this.page.pageSize = event
        },
        handleCurrentPage(event) {
            this.page.currentPage = event
        },
    }
    },
    // 刷新按钮
    handleRefresh() {
      this.getDataList()
    },
    handleSizePage(event) {
      this.page.pageSize = event
    },
    handleCurrentPage(event) {
      this.page.currentPage = event
    },
  }
}
</script>