前端工单模板

审批流模板

说明
index（父组件）
TableCopponentes(子组件 表格 修改按钮 删除按钮 自带分页)
SearchComponentes（子组件 搜索）
Crumbs（子组件 面包屑）
ButtonComponentes（子组件 添加按钮）

views/workflow-manage/index.vue

<template>
  <div>
    <div id="components-layout-demo-basic">
      <a-layout>
        <a-layout-header style="background: #F0F2F5">
          <Crumbs></Crumbs>
          <!--          页内标题-->

          <!--          添加按钮-->
          <ButtonComponent
            @addFlowConf="addFlowConf"
            :visible=false
            :FlowConf="FlowConf"
          >
          </ButtonComponent>
        </a-layout-header>


        <a-layout-content>
          <!--          搜索组件-->
          <SearchComponent
            @onSearch="onSearch"
          ></SearchComponent>


        </a-layout-content>


        <a-layout-footer>
          <!--          展示  删除按钮 修改按钮-->
          <TableComponent
            @showFlowConf="showFlowConf"
            @delFlowConf="delFlowConf"
            @upFlowConf="upFlowConf"
            :data="data"
            :FlowConf="FlowConf"
            :pagination.sync="pagination"
            @pageFlowConf="pageFlowConf"
          >
          </TableComponent>
        </a-layout-footer>
      </a-layout>

    </div>


  </div>
</template>

<script>
import Crumbs from "./componentes/Crumbs";
import SearchComponent from "./componentes/SearchComponent";
import ButtonComponent from "./componentes/ButtonComponent";
import TableComponent from "./componentes/TableComponent";
import {getFlowConf, upFlowConf, delFlowConf, postFlowConf } from "../../http/apis";

const key = 'updatable';
export default {
  components: {
    //面包屑
    Crumbs,
    //搜索框
    SearchComponent,
    //添加按钮
    ButtonComponent,
    //展示信息 删除 修改按钮
    TableComponent,
  },
  name: "FlowConfManage",
  data() {
    return {
      //控制弹窗
      visible: false,
      //展示数据
      data: [],
      //分页
      pagination: {
        total: 0,
        pageSize: 10,//每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ["5", "10", "30", "50", "100"],//每页中显示的数据
        showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
      },
      filterData: {},
      FlowConf: [],
      FlowConfRole: []

    }
  },
  methods: {
    //分页
    pageFlowConf(filterData) {
      this.showFlowConf(filterData)
      // getFlowConf(pageData).then(res => {
      //   console.log(res)
      //   this.data = res.results
      //   this.pagination.total = res.count
      // })
    },
    //展示用户
    showFlowConf(filterData) {
      getFlowConf(filterData).then(res => {
        console.log(res)
        this.data = res.results
        this.pagination.total = res.count

      })
    },
    //删除用户
    delFlowConf(text) {
      const isDel = confirm("确定删除吗")
      if (isDel) {
        delFlowConf({id: text}).then(res => {
          console.log(res)
          this.showFlowConf()
          this.$message.info('删除成功');
        }).catch(err => {
          console.log(err)
        })
      } else {

      }

    },
    //搜索name mobile email 并展示
    onSearch(value) {
      console.log(value);
      // var numReg = /^[0-9]*$/
      // if (value == '') {
      //   delete this.filterData["FlowConfname"]
      //   delete this.filterData["mobile"]
      // } else if (!numReg.test(value)) {
      //   this.filterData["FlowConfname"] = value
      // } else {
      console.log(value)
        this.filterData["name"] = value
      // }
      this.showFlowConf(this.filterData)
      // postSearch({search_name: value}).then(res => {
      //   console.log(res)
      //   const hide = this.$message.loading('Action in progress..', 0);
      //   setTimeout(hide, 100);
      //   this.data = res
      // })
    },
    //添加用户
    addFlowConf(params) {
      console.log(params, "1111111111111111111111111")
      postFlowConf(params).then(res => {
        console.log(res)
        this.showFlowConf()
        this.visible = false;
        this.$message.loading({content: '添加中...', key});
        setTimeout(() => {
          this.$message.success({content: '添加成功!', key, duration: 2});
        }, 1000);

      })
      this.visible = false;
    },
    //修改用户
    upFlowConf(params) {

      upFlowConf(params).then(res => {
        console.log(res)
        this.showFlowConf()
        this.visible = false;
      })
      this.visible = false;
    },
    //展示角色
    // showFlowConf() {
    //   getRole().then(res => {
    //     this.FlowConf = res.results
    //     for (let i in this.FlowConf) {
    //     }
    //   })
    // }
  },


  //钩子方法
  mounted() {
  },
  created() {
    //加载时调用展示用户
    this.showFlowConf()

  },
  //监听属性
  watch: {},
  //计算属性
  computed: {}
}
</script>

<style scoped>
.h3 {
  font-weight: 800;
  margin-left: -3%;
  margin-top: -20px;
}

</style>

views/workflow-manage/componentes/TableComponentes.vue

<template>

  <div>
    <a-table
      :columns="columns"
      :data-source="data"
      :rowKey="record => record.id"
      :pagination.sync="pagination"
      @change="onShowSizeChange"

    >
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle"><a-icon type="smile-o"/> ID</span>
      <span slot="tags" slot-scope="tags">
              <a-tag
                v-for="tag in tags"
                :key="tag"
                :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
              >
                {{ tag.toUpperCase() }}
              </a-tag>
    </span>
      <span slot="action" slot-scope="text, record">
            <a-button type="primary" @click="showModal(text)" style="margin-left: 5px">
      修改
    </a-button>
    <a-modal v-model="visible" title="Basic Modal" @ok="handleOk(text)">
      工单
      <a-input placeholder="" v-model="name" v-if="pk == uid"/>
      工单
      <a-input placeholder="" v-model="name" disabled="disabled" v-if="pk != uid"/>
      详情
      <a-input placeholder="" v-model="description"/>
      自定义字段
      <a-input placeholder="" v-model="customfield"/>
      <!--      角色-->
      <!--      <a-select-->
      <!--        mode="multiple"-->
      <!--        :default-value="[]"-->
      <!--        style="width: 100%"-->
      <!--        placeholder="Please select"-->
      <!--        @change="handleChange"-->
      <!--      >-->
      <!--        <a-select-option v-for="i in FlowConf" :key="i.id">-->
      <!--          {{ i.name }}-->
      <!--        </a-select-option>-->
      <!--      </a-select>-->
    </a-modal>
           <a-button type="danger" @click="delFlowConf(text.id)">删除</a-button>
            <a-button type="primary" style="background: blueviolet"
                      @click="addApproveActionConf(text.id)">添加到审批</a-button>
        <!--        添加到审批按钮-->

    </span>
    </a-table>
  </div>

</template>
<script>
import {delFlowConf, getFlowConf} from "../../../http/apis";

const columns = [
  {
    dataIndex: 'id',
    // key: 'FlowConfname',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'name'},
  },
  {
    title: '工单',
    dataIndex: 'name',
    // key: 'mobile',
  },
  {
    title: '详情',
    dataIndex: 'description',
    // key: 'email',
  },
  {
    title: '自定义字段',
    // key: 'last_login',
    dataIndex: 'customfield',
    // scopedSlots: {customRender: 'tags'},
  },
  {
    title: '操作',
    // key: 'last_login',
    scopedSlots: {customRender: 'action'},
  },
];

export default {
  name: "TableComponent",
  props: ['data', 'pagination', 'FlowConf',],
  data() {
    return {
      // data: [],
      columns,
      visible: false,
      name: '',
      customfield: '',
      description: '',
      role: '',
      pk: '',
      // pagination: {
      //   total: 0,
      //   pageSize: 2,//每页中显示10条数据
      //   showSizeChanger: true,
      //   pageSizeOptions: ["5", "10", "20", "30"],//每页中显示的数据
      //   showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
      // },
      uid: localStorage.getItem("uid"),
    }
  },
  //方法
  methods: {
    //角色id
    handleChange(value) {
      // for (let i in value){
      this.role = value
      // }
    },
    //分页
    onShowSizeChange(pagination) {
      let filterData = {
        page_size: pagination.pageSize,
        page: pagination.current,
      }
      this.$emit('pageFlowConf', filterData)

    },
    //修改展示输入框内详情
    showModal(text) {
      this.visible = true;
      this.name = text.name
      this.description = text.description
      this.customfield = text.customfield
      this.pk = text.id
    },
    //调用删除方法 传送text(id)
    delFlowConf(text) {
      this.$emit('delFlowConf', text)
    },
    //调用修改方法 并传送数据 以及修改谁（id）
    handleOk(text) {
      console.log(text.id)
      let params = {
        name: this.name,
        description: this.description,
        customfield: this.customfield,
        id: this.pk,
        role: this.FlowConf
      }
      this.$emit('upFlowConf', params)
      this.visible = false;
    },
    addApproveActionConf(pk) {
      this.$router.push({name: '审批', params: {"id": pk}})
    },
  },
  //钩子方法
  mounted() {
  },
  created() {
    // this.showFlowConf()
  },
  //监听属性
  watch: {},
  //计算属性
  computed: {}
}
</script>

<style scoped>

</style>

views/workflow-manage/componentes/SearchComponentes.vue

<template>

  <div>
    <div>
      <a-input-search class="a-input-search" placeholder="工单和字段" enter-button @search="onSearch"/>
      <br/><br/>
    </div>


  </div>

</template>

<script>
import {postSearch} from "../../../http/apis";

export default {
  name: "SearchComponent",
  data() {
    return {}
  },
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
    },
    onSearch(value) {
      //调用搜索方法 并传送value（输入框内容）
      this.$emit('onSearch', value)
      // console.log(value);
      // postSearch({search_name: value}).then(res => {
      //   console.log(res)
      //   this.user_list = res
      // })
    },
  },
  //钩子方法
  mounted() {
  },
  created() {

  },
  //监听属性
  watch: {},
  //计算属性
  computed: {}
}
</script>

<style scoped>
.a-input-search {
  width: 400px;
  margin-left: 35%;

}

.components-input-demo-size .ant-input {
  width: 200px;
  margin: 0 30px 30px 0;
}
</style>

views/workflow-manage/componentes/Crumbs.vue

<template>
  <div>
    <a-breadcrumb separator="" class="a-breadcrumb">
      <a-breadcrumb-item>
        工单
      </a-breadcrumb-item>
      <a-breadcrumb-separator>:</a-breadcrumb-separator>
      <a-breadcrumb-item href="">
        工单模块
      </a-breadcrumb-item>
      <a-breadcrumb-separator/>
      <a-breadcrumb-item href="">
        工单管理
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "Crumbs",
  data() {
    return {}
  },
  methods: {},
  //钩子方法
  mounted() {
  },
  created() {

  },
  //监听属性
  watch: {},
  //计算属性
  computed: {}
}
</script>

<style scoped>
.a-breadcrumb {
  /*background:red;*/
  color: #1890ff;
  /*margin-top: -15px;*/
  margin-left: -30px;
}
</style>

views/workflow-manage/componentes/ButtonComponentes.vue

<template>

  <div>
    <a-button type="primary" @click="showModal" style="margin-left: 15px;">
      + 创建工单
    </a-button>
    <a-modal v-model="visible" title="Basic Modal" @ok="handleOk">
      工单
      <a-input placeholder="" v-model="name"/>
      详情
      <a-textarea placeholder="textarea with clear icon" allow-clear  v-model="description"/>
    </a-modal>
  </div>

</template>

<script>

export default {
  props: ["FlowConf"],
  name: "ButtonComponent",
  data() {
    return {
      visible: false,
      name: '',
      customfield: '',
      description: '',
      role: 1,
      size: 'default',
    }
  },
  methods: {
    //调用visible展示弹出框
    showModal() {
      this.visible = true;
    },
    //添加数据并 调用添加用户函数
    handleOk() {
      let params = {
        name: this.name,
        customfield: this.customfield,
        description: this.description,
      }
      this.$emit('addFlowConf', params)

      this.visible = false;
    },
    handleChange(value) {
      // for (let i in value){
      this.role = value
      // }
    },
    onChange(e) {
      console.log(e);
    },


  },


  //钩子方法
  mounted() {
  },
  created() {

  },
  //监听属性
  watch: {},
  //计算属性
  computed: {}
}
</script>

<style scoped>

</style>

posted @ 2020-11-30 07:26 心-瘾阅读(371) 评论(0) 编辑收藏举报

刷新页面返回顶部

心-瘾

前端 工单模板

审批流模板

views/workflow-manage/index.vue

views/workflow-manage/componentes/TableComponentes.vue

views/workflow-manage/componentes/SearchComponentes.vue

views/workflow-manage/componentes/Crumbs.vue

views/workflow-manage/componentes/ButtonComponentes.vue

公告

前端工单模板