标签：console name res 前端 配置 value 审批 id log

审批流模板

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

1. views/role-manage/index.vue

   1. <template>
        <div>
          <div id="components-layout-demo-basic">
            <a-layout>
              <a-layout-header style="background: #F0F2F5">
                <Crumbs></Crumbs>
                <!--          页内标题-->
      
                <!--          添加按钮-->
                <ButtonComponent
                  @addApproveActionConf="addApproveActionConf"
                  :visible=false
                  :ApproveActionConf="ApproveActionConf"
                >
                </ButtonComponent>
              </a-layout-header>
      
      
              <a-layout-content>
                <!--          搜索组件-->
                <SearchComponent
                  @onSearch="onSearch"
                ></SearchComponent>
      
      
              </a-layout-content>
      
      
              <a-layout-footer>
                <!--          展示  删除按钮 修改按钮-->
                <TableComponent
                  @showApproveActionConf="showApproveActionConf"
                  @delApproveActionConf="delApproveActionConf"
                  @upApproveActionConf="upApproveActionConf"
                  :data="data"
                  :ApproveActionConf="ApproveActionConf"
                  :pagination.sync="pagination"
                  @pageApproveActionConf="pageApproveActionConf"
                >
                </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 {
        getApproveActionConf,
        upApproveActionConf,
        delApproveActionConf,
        postApproveActionConf,
        getApproveActionConfDetails,
        getFlowConfDetails
      } from "../../http/apis";
      
      const key = 'updatable';
      export default {
        components: {
          //面包屑
          Crumbs,
          //搜索框
          SearchComponent,
          //添加按钮
          ButtonComponent,
          //展示信息 删除 修改按钮
          TableComponent,
        },
        name: "ApproveActionConfManage",
        data() {
          return {
            //控制弹窗
            visible: false,
            //展示数据
            data: [],
            //分页
            pagination: {
              total: 0,
              pageSize: 10,//每页中显示10条数据
              showSizeChanger: true,
              pageSizeOptions: ["5", "10", "30", "50", "100"],//每页中显示的数据
              showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
            },
            filterData: {},
            ApproveActionConf: [],
            ApproveActionConfRole: [],
            workflowID: this.$route.params.id
      
          }
        },
        methods: {
          //分页
          pageApproveActionConf(filterData) {
            this.showApproveActionConf(filterData)
            // getApproveActionConf(pageData).then(res => {
            //   console.log(res)
            //   this.data = res.results
            //   this.pagination.total = res.count
            // })
          },
          //展示用户
          showApproveActionConf(filterData) {
            getFlowConfDetails({id:this.workflowID}).then(res => {
              console.log(res)
              this.data = res.approveactionconf_set
              this.ApproveActionConf = res
              this.pagination.total = res.count
            })
          },
          //删除用户
          delApproveActionConf(text) {
            const isDel = confirm("确定删除吗")
            if (isDel) {
              delApproveActionConf({id: text}).then(res => {
                console.log(res)
                this.showApproveActionConf()
                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["ApproveActionConfname"]
            //   delete this.filterData["mobile"]
            // } else if (!numReg.test(value)) {
            //   this.filterData["ApproveActionConfname"] = value
            // } else {
            console.log(value)
            this.filterData["name"] = value
            // }
            this.showApproveActionConf(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
            // })
          },
          //添加用户
          addApproveActionConf(params) {
            console.log(params, "1111111111111111111111111")
            postApproveActionConf(params).then(res => {
              console.log(res)
              this.showApproveActionConf()
              this.visible = false;
              this.$message.loading({content: '添加中...', key});
              setTimeout(() => {
                this.$message.success({content: '添加成功!', key, duration: 2});
              }, 1000);
      
            })
            this.visible = false;
          },
          //修改用户
          upApproveActionConf(params) {
      
            upApproveActionConf(params).then(res => {
              console.log(res)
              this.showApproveActionConf()
              this.visible = false;
            })
            this.visible = false;
          },
          //展示角色
          // showApproveActionConf() {
          //   getRole().then(res => {
          //     this.ApproveActionConf = res.results
          //     for (let i in this.ApproveActionConf) {
          //     }
          //   })
          // }
        },
      
      
        //钩子方法
        mounted() {
        },
        created() {
          //加载时调用展示用户
          this.showApproveActionConf()
      
        },
        //监听属性
        watch: {},
        //计算属性
        computed: {}
      }
      </script>
      
      <style scoped>
      .h3 {
        font-weight: 800;
        margin-left: -3%;
        margin-top: -20px;
      }
      
      </style>
      
      

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

   1. <template>
        <div>
          <!--    table自带分页        :pagination.sync="pagination"-->
          <a-table
            :columns="columns"
            :data-source="data"
            :rowKey="record => record.id"
            @change="onShowSizeChange"
      
          >
            <a slot="name" slot-scope="text">{{ text }}</a>
            <span slot="customTitle"><a-icon type="smile-o"/> ID</span>
            <span slot="specific_flowconf" slot-scope="specific_flowconf">
                    <a-tag
                      v-for="tag in specific_flowconf"
                      :key="tag"
                      :color="tag === 'loser' ? 'volcano' : tag.length > 1 ? '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-textarea placeholder="textarea with clear icon" allow-clear v-model="description"/>
            <!--      <a-input placeholder="" v-model="description"/>-->
            自定义字段
                  <a-textarea placeholder="textarea with clear icon" allow-clear v-model="customfield"/>
      
            <!--      <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 ApproveActionConf" :key="i.id">-->
            <!--          {{ i.name }}-->
            <!--        </a-select-option>-->
            <!--      </a-select>-->
          </a-modal>
                 <a-button type="danger" @click="delApproveActionConf(text.id)">删除</a-button>
              <!--        添加到审批按钮-->
      
          </span>
          </a-table>
        </div>
      
      </template>
      <script>
      import {delApproveActionConf, getApproveActionConf} from "../../../http/apis";
      
      const columns = [
        {
          dataIndex: 'id',
          // key: 'FlowConfname',
          slots: {title: 'customTitle'},
          scopedSlots: {customRender: 'name'},
        },
        {
          title: '工单',
          dataIndex: 'flowconf.name',
          // key: 'mobile',
        },
        {
          title: '审批序号',
          dataIndex: 'sequence',
          // key: 'email',
        },
        {
          title: '审批',
          // key: 'last_login',
          dataIndex: 'specific_flowconf',
          scopedSlots: {customRender: 'specific_flowconf'},
        },
        {
          title: '操作',
          // key: 'last_login',
          scopedSlots: {customRender: 'action'},
        },
      ];
      
      
      export default {
        name: "TableComponent",
        props: ['data', 'pagination', 'ApproveActionConf',],
        data() {
          return {
            // data: [],
            columns,
            visible: false,
            name: '',
            customfield: '',
            description: '',
            role: '',
            pk: '',
            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('pageApproveActionConf', filterData)
      
          },
          //修改展示输入框内详情
          showModal(text) {
            this.visible = true;
            this.name = text.name
            this.description = text.description
            this.customfield = text.customfield
            this.pk = text.id
          },
          //调用删除方法 传送text(id)
          delApproveActionConf(text) {
            this.$emit('delApproveActionConf', text)
          },
          //调用修改方法 并传送数据 以及修改谁（id）
          handleOk(text) {
            console.log(text.id)
            let params = {
              name: this.name,
              description: this.description,
              customfield: this.customfield,
              id: this.pk,
              role: this.ApproveActionConf
            }
            this.$emit('upApproveActionConf', params)
            this.visible = false;
          },
          //跳转到添加审批页面
          addApproveActionConf(pk) {
            this.$router.push({name: '审批', params: {"id": pk}})
          },
        },
        //钩子方法
        mounted() {
        },
        created() {
          // this.showApproveActionConf()
        },
        //监听属性
        watch: {},
        //计算属性
        computed: {}
      }
      </script>
      
      <style scoped>
      
      </style>
      
      

3. views/role-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('getApproveActionConf ', 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>
      
      

4. views/role-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/role-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="ApproveActionConf.name" v-model="name" disabled/>
            审批序号
            <br>
            <a-input-number id="inputNumber" v-model="value" :min="1" :max="10" @change="onChange"/>
            <br>
            审批类型
            <br>
            <a-select
              label-in-value
              :default-value="{}"
              style="width: 120px"
              @change="handleChange"
              v-model="type"
            >
              <a-select-option value="1">
                指定人员审批
              </a-select-option>
              <a-select-option value="2">
                角色组
              </a-select-option>
            </a-select>
            <br>
      
            审批人员
            <br>
            <a-select
              default-value=""
              style="width: 120px"
              @change="handleChange2"
              v-model="roleuser"
            >
              <!--        循环展示判断审批类型 后获取到的值-->
              <a-select-option v-for="i in approvergroupList"
                               key="i.id" :value="i.id">
                <!--          如果为指定用户  展示username-->
                <span v-if="i.username">{{ i.username }}</span>
                <!--          如果为指定角色组  展示zh_name-->
                <span v-else-if="i.zh_name">{{ i.zh_name }}</span>
              </a-select-option>
            </a-select>
          </a-modal>
        </div>
      
      </template>
      
      <script>
      
      import {getRole, getUser} from "../../../http/apis";
      
      export default {
        props: ["ApproveActionConf"],
        name: "ButtonComponent",
        data() {
          return {
            visible: false,
            name: this.ApproveActionConf.name,
            value: 1,
            type: '',
          roleuser: '',
            size: 'default',
           approvergroupList: []
          }
        },
        methods: {
          //审批人
          handleChange2(value) {
          },
          //审批类型  并添加值
          handleChange(value) {
            // 1 为指定用户  获取所有用户
            if (value.key == "1") {
              getUser().then(res => {
                this.approvergroupList = res.results
              })
              //  2 为 角色组  获取所有角色
            } else if (value.key == "2") {
              getRole().then(res => {
                this.approvergroupList = res.results
              })
            }
          },
          onChange(value) {
            console.log('changed', value);
          },
          //调用visible展示弹出框
          showModal() {
            this.visible = true;
          },
          //添加数据并 调用添加用户函数
          handleOk() {
            console.log(this.roleuser,"22222")
            let params = {
              flowconf: this.ApproveActionConf.id,
              sequence: this.value,
              approve_type_id: this.type.key,
              approve_id: this.roleuser,
            }
            console.log(params)
            this.$emit('addApproveActionConf', params)
      
            this.visible = false;
          },
        },
      
      
        //钩子方法
        mounted() {
      
        },
        created() {
      
        },
        //监听属性
        watch: {},
        //计算属性
        computed: {}
      }
      </script>
      
      <style scoped>
      
      </style>
      
      

标签：console,name,res,前端,配置,value,审批,id,log
来源： https://www.cnblogs.com/wyx-zy/p/14059298.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。