前端 工单模板

审批流模板

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

1. views/workflow-manage/index.vue

   1. <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>
      
      

2. views/workflow-manage/componentes/TableComponentes.vue

   1. <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=" 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>
      
      

3. views/workflow-manage/componentes/SearchComponentes.vue

   1. <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 {
         400px;
        margin-left: 35%;
      
      }
      
      .components-input-demo-size .ant-input {
         200px;
        margin: 0 30px 30px 0;
      }
      </style>
      
      

4. views/workflow-manage/componentes/Crumbs.vue

   1. <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>
      
      

5. views/workflow-manage/componentes/ButtonComponentes.vue

   1. <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>