表格相关问题

searchForm

searchKey

this.searchKey=""
header
key
searchOut
	Input
	search
add
addGroop

1、表格超出隐藏，鼠标悬浮上去显示

start_time

end_time

data_id
name
gender
email
cellphone
action

// 控制文本隐藏
.label-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<template slot-scope="{ row }" slot="email">
  <div class="label-ellipsis" :title="row.email">
    {{ row.email }}
  </div>
</template>

      column: [
        {
          title: "邮箱",
          key: "email",
          slot: "email"
        }
      ],

2、根据数值，显示中文，编辑获取的又是数值

<template slot-scope="{ row }" slot="mapbox_flag">
     <div class="label-ellipsis" :title="getMapFlag(row.mapbox_flag)">
         {{ getMapFlag(row.mapbox_flag) }}
     </div>
</template>

      mapFlag: [
        {
          value: 0,
          name: "不支持"
        },
        {
          value: 1,
          name: "支持"
        }
      ]

getMapFlag(val) {
      if (val !== 0 && val !== 1) return null;
      let type = null;
      this.mapFlag.some(item => {
        if (val === item.value) {
          type = item.name;
          return true;
        }
      });
      return type;
    },

3、步骤条

stepCurrent

4、添加传送下拉框的值；编辑显示数值所对应的中文值

city
language
gender

男 gender: 0 
中文	language: "ENUS"
时区 timezone: "Asia/Magadan"

女 gender: 1
英语 language: "ZHCN"
时区 timezone: "Asia/Shanghai"

5、点击判断已经有了，按钮变成灰色

 :disabled="isAble"
row.isAble = true;

6、获取指定id

queryAppointUser


        // this.edit_id = params.data_id;
        // this.is_edit = true;
        // this.title = "编辑用户管理";
        // this.formItem.account = params.account;
        // this.formItem.name = params.name;
        // this.formItem.mail = params.email;
        // this.formItem.phone = params.cellphone;
        // this.city = params.timezone;
        // this.language = params.language;
        // this.gender = params.gender;

createUserManage

OrganizationData

   columns12: [
        {
          title: "组名称",
          key: "name",
          width: 420
        },
        {
          title: "操作",
          slot: "action"
        }
      ],
result.group_list  // 编辑返回的数据

data_id: 1013
group_id: 1003
group_name: "管理员3"
user_account: "117"
user_cellphone: "18812345117"
user_email: "117@163.com"
user_gender: 1
user_id: 1032
user_name: "117"

7、添加组样式修改

searchForm.key 改成 searchKey 


之前
     <Table
          :columns="columns12"
          :data="OrganizationData"
          height="214"
          @on-selection-change="selectChange"
        >
          <template slot-scope="{ row }" slot="action">
            <!-- 修改 -->
            <span @click="updateClickPop(row)">
              <i title="编辑" class="iconfont" style="padding: 0px 5px"
                >&#xe613;</i
              >
            </span>
            <!-- 删除 -->
            <span @click="deleteClickPop(row)">
              <i title="删除" class="iconfont" style="padding: 0px 5px"
                >&#xe630;</i
              >
            </span>
          </template>
        </Table>

power---delete
bug 暂无数据样式

     <div class="step">
        <Steps :current="stepCurrent">
          <Step title="第一步" content="输入基本信息"></Step>
          <Step title="第二步" content="添加关联组"></Step>
        </Steps>
      </div>
      // 步骤条
      stepCurrent: 0,
//下一步
          this.stepCurrent = 1;
//上一步
this.stepCurrent = 0;

//添加组的列表
         <Table
            :columns="groupColumns"
            height="210"
            :data="groupData"
            style="margin-top: 10px"
          >
            <template slot-scope="{ row, index }" slot="action">
              <!-- 添加 -->
              <!-- <Button @click="addM(row)" type="primary">添加</Button> -->
              <span @click="deleteUser(row, index)">
                <i title="删除" class="iconfont" style="padding: 0px 5px"
                  >&#xe630;</i
                >
              </span>
            </template>
          </Table> 

8、拉的代码调试

taskManage	任务管理
productCategory		产品类别
waterManger	水印管理
colorProgram	色板方案
userManage	用户管理

9、统一的表格样式

          <div class="center">
            <Table
              :columns="groupColumns"
              :data="groupData"
              :loading="loading"
              height="234"
            >
              <!-- gender -->
              <template slot-scope="{ row }" slot="gender">
                <div class="label-ellipsis" :title="getGender(row.gender)">
                  {{ getGender(row.gender) }}
                </div>
              </template>
              <!-- email -->
              <template slot-scope="{ row }" slot="email">
                <div class="label-ellipsis" :title="row.email">
                  {{ row.email }}
                </div>
              </template>
              <template slot-scope="{ row, index }" slot="action">
                <div class="delete" @click="deleteUser(row, index)"></div>
              </template>
            </Table>
          </div>

// 中间表格
.center {
  margin-top: 26px;
  /deep/.ivu-table th {
    background-color: #f5f7fa;
    height: 50px;
    text-align: left;
  }

  /deep/.ivu-table td {
    background-color: #fff;
    height: 46px;
    text-align: left;
  }
  .edit {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url("../../../assets/images/userEdit.png");
  }
  .delete {
    width: 16px;
    height: 16px;
    display: inline-block;
    // margin-left: 22px;
    background-image: url("../../../assets/images/delete.png");
  }
}

10、统一的搜索框的样式

          <div class="header">
            <div class="key" style="font-size: 14px">关键字</div>
            <div class="searchOut">
              <Input
                type="text"
                v-model="addKey"
                placeholder="请输入关键字检索"
              ></Input>
              <div class="search" @click="queryOrganization"></div>
            </div>
          </div>

.header {
  height: 36px;
  line-height: 36px;
  button {
    width: 98px;
    height: 36px;
  }
  // 关键字
  .key {
    font-size: 14px;
    float: left;
  }
  // 搜索框外面
  .searchOut {
    width: 256px;
    height: 36px;
    float: left;
    margin-left: 2%;
    position: relative;
    /deep/.ivu-input {
      width: 256px;
      height: 36px;
      padding-right: 36px;
      box-sizing: border-box;
    }
    // 搜索框旁边的按钮
    .search {
      width: 18px;
      height: 18px;
      background-image: url("../../../assets/images/userSearch.png");
      position: absolute;
      top: 25%;
      left: 88%;
    }
  }
  // 添加
  .add {
    float: right;
    margin-right: 2%;
  }
  // 添加组
  .addGroop {
    float: right;
  }
  // 重置
  .reset {
    float: right;
    margin-right: 2%;
  }
}

11、判断是否添加了，按钮变灰色

渲染列表数据 addResourceData

渲染列表中的添加 addResource - packQueryResource

弹出添加资源-弹窗 addResourceRelate

要添加的列表 resourceData

html

       <template slot-scope="{ row, index }" slot="action">
              <!-- 添加 -->
              <Button
                @click="addM(row, index)"
                type="primary"
                :disabled="row.isAble"
                >添加</Button
              >
         </template>

或者
          <template slot-scope="{ row, index }" slot="action">
            <!-- 添加 -->
            <Button
              @click="addUser1(row, index)"
              v-if="!row.isAble"
              type="primary"
              >添加</Button
            >
            <Button :disabled="true" v-else>添加</Button>
          </template>

js

//弹框弹出来的返回来的列表数据
      SYS_API.queryOrganization(params).then((result) => {
        console.log("queryOrganization", result);
        if (result.item_list && result.item_list.length) {
          let items = result && result.item_list ? result.item_list : [];
            //弹框弹出来的返回来的列表数据进行遍历
          items.length &&
            items.map((obj) => {
              let flag = false;
              //要添加到的列表中的数据进行遍历
              let curObj =
                this.OrganizationData.length &&
                this.OrganizationData.find((obj1) => {
                  return obj1.group_id == obj.data_id;
                });
              flag = curObj ? true : false;
              obj.isAble = flag;
            });
          this.groupData = items;
          this.organizationTotal = result.total_count;
        } else {
          this.groupData = [];
        }
      });
//弹框弹出来的返回来的列表数据-添加操作
//（这一步的操作就是为了不要再刷新列表就可以把按钮变灰色，因为变回操作是在请求中写的，需要重新请求一下数据才能渲染）
// 注意是弹框弹出来的返回来的列表数据
this.groupData[index].isAble = true;

渲染出来的列表里的添加操作 addUser1

添加用户按钮-弹出弹框 addUserRelate 调用packQueryAddUser进行查询

12、布局

//900 
      // 添加组-用户
      groupColumns: [
        {
          title: "账号",
          key: "data_id",
          width: 150,
        },
        {
          title: "昵称",
          key: "name",
          width: 150,
        },
        {
          title: "邮箱",
          key: "email",
        },
        {
          title: "手机",
          key: "cellphone",
          width: 180,
        },
        {
          title: "操作",
          slot: "action",
          width: 120,
        },
      ],

13、资源

          <Row>
            <span>关联资源</span>
            <Button
              @click="addResourceRelate"
              type="info"
              style="margin-left: 10px"
              >添加资源</Button
            >
          </Row>

          <Table
            :columns="resourceColumns"
            :data="resourceData"
            height="210"
            style="margin-top: 10px"
          >
            <!-- 读取 -->
            <template slot="read" slot-scope="{ index }">
              <Checkbox v-model="resourceData[index].right_read"></Checkbox>
            </template>
            <!-- 创建 -->
            <template slot="create" slot-scope="{ index }">
              <Checkbox v-model="resourceData[index].right_create"></Checkbox>
            </template>
            <!-- 更新 -->
            <template slot="update" slot-scope="{ index }">
              <Checkbox v-model="resourceData[index].right_update"></Checkbox>
            </template>
            <!-- 删除 -->
            <template slot="delete" slot-scope="{ index }">
              <Checkbox v-model="resourceData[index].right_delete"></Checkbox>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <!-- 删除 -->
              <span @click="deleteResource(row, index)">
                <i title="删除" class="iconfont" style="padding: 0px 5px"
                  >&#xe630;</i
                >
              </span>
            </template>
          </Table>

14、资源逻辑

解决方法=>重新赋值

row.resource_name = row.name;

点击添加资源-弹出框里的数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mg7RGnjp-1644559192739)(C:\Users\chenhaonan\AppData\Roaming\Typora\typora-user-images\image-20211209161411876.png)]

编辑返回的数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qgSTrMW2-1644559192741)(C:\Users\chenhaonan\AppData\Roaming\Typora\typora-user-images\image-20211209161733468.png)]

编辑返回的数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vFQKxNUU-1644559192742)(C:\Users\chenhaonan\AppData\Roaming\Typora\typora-user-images\image-20211209192626748.png)]

data_id: 1012
group_id: 1015
group_name: "25222"
resource_id: 102
resource_name: "影像导出"
resource_type: 0
right_create: 0
right_delete: 0
right_read: 0
right_update: 1

要添加的 resourceData

data_id: 1002
group_id: 1012
group_name: "222"
resource_id: 103
resource_name: "工作流用户"
resource_type: 0
right_create: 1
right_delete: 0
right_read: 0
right_update: 0

//弹窗渲染的
data_id: 104
data_status: 1
data_update_time: "2020-11-27 11:08:02"
data_update_user: 0
data_version: 0
name: "影像下载"
type: 0

添加资源弹框样式

      <div class="header" style="height: 43px">
        <div style="float: left">
          <span>关键字</span>
          <Input
            type="text"
            v-model="addResourceKey"
            placeholder="关键字"
            style="width: 120px"
          ></Input>
        </div>
        <div style="float: left; margin-left: 10px">
          <span>资源类型</span>
          <Select v-model="resourceType" style="width: 200px">
            <Option
              v-for="item in resourceTypeList"
              :value="item.id"
              :key="item.id"
              >{{ item.label }}</Option
            >
          </Select>
        </div>
        <div style="float: right">
          <Button @click="queryResource" type="primary">检索</Button>
          <Button
            @click="resetResource"
            type="primary"
            style="margin-left: 10px"
            height="200"
            >重置</Button
          >
        </div>
      </div>

resourceHeader

表格

      <Table :columns="addResourceColumns" :data="addResourceData" height="223">
        <template slot-scope="{ row }" slot="action" style="text-align=right">
          <!-- 添加 -->
          <Button @click="addResource(row)" type="primary">添加</Button>
        </template>
      </Table>

资源添加

渲染出来列表中的添加 addResource

15、列表中展示，根据数值，显示中文

resourceColumns

resource_type

getResourceType

resourceTypeList

          <template slot-scope="{ row }" slot="gender">
            <div class="label-ellipsis" :title="getGender(row.gender)">
              {{ getGender(row.gender) }}
            </div>
          </template>

//绑定关联
        {
          title: "性别",
          key: "gender",
          slot: "gender"
        },
            //遍历取值
      genderType: [
        { value: 0, name: "男" },
        { value: 1, name: "女" }
      ],
            
                // 转化性别
    getGender(val) {
      if (val !== 0 && val !== 1) return nall;
      let gender = null;
      this.genderType.some(item => {
        if (val == item.value) {
          gender = item.name;
          return true;
        }
      });
      return gender;
    }

16、bug 资源管理不显示

发送请求 addSure

要渲染的列表 resourceData

产品

    <!-- <Table :columns="productColumn" :data="productData" height="183">
        <template slot-scope="{ row }" slot="action">
          <!-- 删除 -->
          <span @click="productDelectClick(row)">
            <i title="删除" class="iconfont" style="padding: 0px 5px"
              >&#xe630;</i
            >
          </span>
        </template>
      </Table> -->

起始时间/结束时间

      <Table :columns="timeColumn" :data="timeData" height="183">
        <template slot-scope="{ row }" slot="action">
          <!-- 删除 -->
          <span @click="timeDelectClick(row)">
            <i title="删除" class="iconfont" style="padding: 0px 5px"
              >&#xe630;</i
            >
          </span>
        </template>
      </Table>

地域名称

   <Table :columns="areaColumn" :data="areaData" height="264">
        <template slot-scope="{ row, index }" slot="action">
          <!-- 删除 -->
          <span @click="areaDelectClick(row, index)">
            <i title="删除" class="iconfont" style="padding: 0px 5px"
              >&#xe630;</i
            >
          </span>
        </template>
      </Table>

?op=update_ex

createUserManage
“timeData” height=“183”>


<span @click=“timeDelectClick(row)”>


地域名称

```html
   <Table :columns="areaColumn" :data="areaData" height="264">
        <template slot-scope="{ row, index }" slot="action">
          <!-- 删除 -->
          <span @click="areaDelectClick(row, index)">
            <i title="删除" class="iconfont" style="padding: 0px 5px"
              >&#xe630;</i
            >
          </span>
        </template>
      </Table>

?op=update_ex

createUserManage