U 用户列表修改

he wei

2022-07-18 44c06441a7e9f2385ecc7daec632d2193e0c6e8e

U 用户列表修改

 src/components/table/advance/ActionColumns.vue

@@ -19,8 +19,8 @@
              <a-tooltip title="固定在列尾" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
                <a-icon :class="['right', {active: col.fixed === 'right'}]" @click="fixColumn('right', col)" type="vertical-align-bottom" />
              </a-tooltip>
              <a-tooltip title="添加搜索" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
                <a-icon :class="{active: col.searchAble}" @click="setSearch(col)" type="search" />
              <a-tooltip :title="col.noSearch ? '' : '添加搜索'" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
                <a-icon :class="{active: col.searchAble, nosearch: col.noSearch}" @click="setSearch(col)" type="search" />
              </a-tooltip>
            </template>
          </a-list-item>
@@ -76,6 +76,9 @@
        }
      },
      setSearch(col) {
        if (col.noSearch) {
          return false;
        }
        this.$set(col, 'searchAble', !col.searchAble)
        if (!col.searchAble && col.search) {
          this.resetSearch(col)
@@ -151,5 +154,8 @@
  .active{
    color: @primary-color;
  }
  .nosearch {
    cursor: not-allowed;
  }
}
</style>

 src/pages/user/apis.js

@@ -4,11 +4,37 @@
 * 查询所有用户信息
 * @returns 
 */
export const getAllUser = (params) => {
export const getAllUser = (params, data) => {
  return axios({
    method: "GET",
    method: "POST",
    url: "docUser/getAllUser",
    params
    params,
    data
  })
}
/**
 * 新增用户
 * @returns 
 */
export const addUser = (data) => {
  return axios({
    method: "POST",
    url: "docUser/addUser",
    headers: {
      "Content-Type": "multipart/form-data"
    },
    data
  })
}
/**
 * 删除用户
 * @returns 
 */
export const deleteUser = (id) => {
  return axios({
    method: "POST",
    url: "docUser/deleteUser",
    params: { id }
  })
}
/**
@@ -36,12 +62,23 @@
  })
}
/**
 * 查询所有部门信息
 * 查询所有角色信息
 * @returns 
 */
 export const getAllRole = () => {
export const getAllRole = () => {
  return axios({
    method: "GET",
    url: "docDepart/getAllRole"
  })
}
/**
 * 清除人脸信息
 * @returns 
 */
export const deleteFace = (faceId) => {
  return axios({
    method: "GET",
    url: "docFace/deleteFace",
    params: {faceId}
  })
}

 src/pages/user/components/userInfo.vue

@@ -44,7 +44,7 @@
                  :wrapperCol="{ span: 18, offset: 1 }"
                  prop="name"
                >
                  <a-input placeholder="请输入" v-model="info.name" />
                  <a-input placeholder="请输入用户姓名" v-model="info.name" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
@@ -64,17 +64,24 @@
                  :wrapperCol="{ span: 18, offset: 1 }"
                  prop="phone"
                >
                  <a-input v-model="info.phone" />
                  <a-input
                    v-model="info.phone"
                    placeholder="请输入用户手机号"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="组别"
                  label="部门"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                  prop="departId"
                >
                  <a-select :defaultValue="info.departId">
                  <a-select
                    :defaultValue="info.departId"
                    v-model="info.departId"
                    placeholder="请选择部门"
                  >
                    <a-select-option
                      v-for="(item, idx) in departList"
                      :key="'depart_' + idx"
@@ -92,7 +99,11 @@
                  :wrapperCol="{ span: 18, offset: 1 }"
                  prop="roleId"
                >
                  <a-select :defaultValue="info.roleId">
                  <a-select
                    :defaultValue="info.roleId"
                    v-model="info.roleId"
                    placeholder="请选择角色"
                  >
                    <a-select-option
                      v-for="(item, idx) in roleList"
                      :key="'role_' + idx"
@@ -119,16 +130,15 @@
</template>

<script>
import { messages } from "../../../components/setting/i18n";
const userInf = {
  faceUrl: "",
  name: "",
  id: "",
  tel: "",
  phone: "",
  departId: "",
  departId: undefined,
  faceId: "",
  roleId: "",
  roleId: undefined,
  depart: {
    departName: "",
  },
@@ -145,7 +155,13 @@
    reader.onerror = (error) => reject(error);
  });
}
import { editUser, getAllRole, getAllDepart } from "../apis";
import {
  editUser,
  addUser,
  getAllRole,
  getAllDepart,
  deleteFace,
} from "../apis";
export default {
  name: "",
  data() {
@@ -161,14 +177,14 @@
            required: true,
            message: "请选择角色",
            trigger: "blur",
          }
          },
        ],
        departId: [
          {
            required: true,
            message: "请选择组别",
            message: "请选择部门",
            trigger: "blur",
          }
          },
        ],
        phone: [
          {
@@ -187,7 +203,7 @@
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          }
          },
        ],
      },
    };
@@ -212,6 +228,10 @@
        };
      },
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    cancelUpload() {
@@ -219,7 +239,7 @@
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
      console.log(this.fileList);
      // console.log(this.fileList);
    },
    handleCancel() {
      this.previewVisible = false;
@@ -234,21 +254,30 @@
    },
    submit() {
      let formData = new FormData();
      let { id, tel, phone, departId, faceId, roleId } = this.info;
      let json = JSON.stringify({ id, tel, phone, departId, faceId, roleId });
      console.log(json);
      let { id, tel, phone, departId, faceId, roleId, name } = this.info;
      let params = {};
      if (this.isEdit) {
        operation = editUser;
        params = { id, tel, phone, departId, faceId, roleId };
      } else {
        operation = addUser;
        params = { name, tel, phone, departId, faceId, roleId };
      }
      let json = JSON.stringify(params);
      // console.log(json);
      if (this.fileList.length) {
        formData.append("file", this.fileList[0].originFileObj);
      }
      formData.append("json", json);
      editUser(formData).then((res) => {
      let operation;
      operation(formData).then((res) => {
        res = res.data;
        console.log(res);
        // console.log(res);
        if (res.code && res.data) {
          this.$message.success("操作成功");
          this.$emit("cancel");
          this.$emit("ok");
        } else {
          this.$message.error("操作失败");
          this.$message.error("操作失败" + (res.msg ? `, ${res.msg}` : ""));
        }
      });
    },
@@ -256,11 +285,21 @@
      this.$emit("cancel");
    },
    deleteFace() {
      let self = this;
      this.$confirm({
        title: "请确认",
        content: "是否删除人脸照片？",
        onOk() {
          console.log("删除");
          deleteFace(self.info.faceId).then((res) => {
            res = res.data;
            if (res.code && res.data) {
              self.$message.success("操作成功");
              self.$emit('search');
              self.info.dface.url = '';
            } else {
              self.$message.error("操作失败");
            }
          });
        },
        onCancel() {},
      });
@@ -297,13 +336,13 @@
        this.roleList = data;
      });
    },
    resetFields () {
    resetFields() {
      this.$refs.formRef.resetFields();
    }
    },
  },

  mounted() {
    console.log(this.info, "this.info");
    // console.log(this.info, "this.info");
    this.getAllDepart();
    this.getAllRole();
    this.resetFields();

 src/pages/user/list.vue

@@ -4,10 +4,10 @@
      <a-space class="operator">
        <!-- <a-button @click="addNew" type="primary">新建</a-button> -->
      </a-space>
      <!-- title="用户列表" -->
      <advance-table
        :columns="columns"
        :data-source="dataSource"
        title="用户列表"
        :loading="loading"
        rowKey="id"
        @search="onSearch"
@@ -21,13 +21,15 @@
          showSizeChanger: true,
          showLessItems: true,
          showQuickJumper: true,
          pageSizeOptions: ['2', '4', '10'],
          showTotal: (total, range) =>
            `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
          onChange: onPageChange,
          onShowSizeChange: onSizeChange,
        }"
      >
        <template slot="title">
          <a-button @click="addUser">新增用户</a-button>
        </template>
        <template slot="operation" slot-scope="text">
          <span>
            <a @click="edit(text)">编辑</a>
@@ -43,10 +45,17 @@
    <a-modal
      :visible="editShow"
      :footer="null"
      title="编辑用户"
      :title="editTitle"
      :destroyOnClose="true"
      @cancel="cancel"
    >
      <user-info :info="userData" @cancel="cancel"></user-info>
      <user-info
        :info="userData"
        :is-edit="isEdit"
        @search="getList"
        @cancel="cancel"
        @ok="ok"
      ></user-info>
    </a-modal>
  </a-card>
</template>
@@ -54,7 +63,7 @@
<script>
import AdvanceTable from "@/components/table/advance/AdvanceTable";
import UserInfo from "./components/userInfo";
import { getAllUser } from "./apis";
import { getAllUser, deleteUser, getAllRole, getAllDepart } from "./apis";

export default {
  name: "",
@@ -62,6 +71,7 @@
  data() {
    return {
      editShow: false,
      isEdit: true,
      loading: false,
      pageCurr: 1,
      pageSize: 10,
@@ -79,41 +89,78 @@
        },
        {
          title: "手机",
          searchAble: true,
          dataIndex: "phone",
        },
        {
          title: "组别",
          title: "部门",
          dataIndex: ["depart", "departName"],
          key: "departName",
          searchAble: true,
          dataType: "select",
          search: {
            selectOptions: [
            ],
          },
        },
        {
          title: "角色",
          dataIndex: ["drole", "roleName"],
          key: "roleName",
          searchAble: true,
          dataType: "select",
          search: {
              selectOptions: [
              ]
            }
        },
        {
          title: "创建时间",
          dataIndex: "creTime",
          noSearch: true,
        },
        {
          title: "操作",
          key: "operation",
          noSearch: true,
          scopedSlots: { customRender: "operation" },
          dataType: null,
        },
      ],
      dataSource: [],
      conditions: {},
    };
  },
  computed: {
    editTitle() {
      return this.isEdit ? "编辑用户信息" : "新增用户";
    },
  },
  created() {
    this.getGoodList();
    this.getList();
    this.getAllRole();
    this.getAllDepart();
  },
  methods: {
    getGoodList() {
    getList() {
      this.loading = true;
      const { pageCurr, pageSize, conditions } = this;
      getAllUser({ pageCurr, pageSize }).then((res) => {
        console.log(res);
      let params = {};
      Object.keys(conditions).forEach((v) => {
        switch (v) {
          case 'depart,departName':
            params['departId'] = conditions[v];
            break;
          case 'drole,roleName':
            params['roleId'] = conditions[v];
            break;
          default:
            params[v] = conditions[v];
            break;
        }
      });
      getAllUser({ pageCurr, pageSize }, params).then((res) => {
        // console.log(res);
        res = res.data;
        let data = [];
        this.loading = false;
@@ -122,51 +169,104 @@
        }
        this.dataSource = data;
      });
      //   ds.goodsList({ page, pageSize, ...conditions }).then((result) => {
      //     const { list, page, pageSize, total } = result.data.data;
      //     this.dataSource = list;
      //     this.page = page;
      //     this.total = total;
      //     this.pageSize = pageSize;
      //     this.loading = false;
      //   });
    },
    onSearch(conditions, searchOptions) {
      console.log(searchOptions);
      // console.log(conditions, searchOptions);
      this.page = 1;
      this.conditions = conditions;
      this.getGoodList();
      this.getList();
    },
    onSizeChange(current, size) {
      this.page = 1;
      this.pageSize = size;
      this.getGoodList();
      this.getList();
    },
    onRefresh(conditions) {
      // console.log('refresh', conditions)
      this.conditions = conditions;
      this.getGoodList();
      this.getList();
    },
    onReset(conditions) {
      // console.log('reset', conditions)
      this.conditions = conditions;
      this.getGoodList();
      this.getList();
    },
    onPageChange(page, pageSize) {
      this.page = page;
      this.pageSize = pageSize;
      this.getGoodList();
      this.getList();
    },
    remove(obj) {
      console.log(obj)
      // console.log(obj);
      deleteUser(obj.text.id).then((res) => {
        res = res.data;
        if (res.code && res.data) {
          this.$message.success("操作成功");
          this.getList();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    addUser() {
      this.isEdit = false;
      this.editShow = true;
      this.userData = undefined;
    },
    edit(obj) {
      console.log(obj);
      obj.text.desc = 132;
      // console.log(obj);
      this.isEdit = true;
      this.userData = JSON.parse(JSON.stringify(obj.text));
      this.editShow = true;
    },
    setColSelectOptions (title, arr) {
      for (let i = this.columns.length; i--;) {
        let item = this.columns[i];
        if(item.title == title) {
          item.search.selectOptions = arr;
          break;
        }
      }
    },
    getAllDepart() {
      getAllDepart().then((res) => {
        res = res.data;
        // console.log(res)
        let data = [];
        if (res.code && res.data) {
          data = res.data2.list.map((v) => {
            return {
              title: v.departName,
              value: v.departId,
            };
          });
        }
        this.setColSelectOptions('部门', data);
      });
    },
    getAllRole() {
      getAllRole().then((res) => {
        res = res.data;
        // console.log(res)
        let data = [];
        if (res.code && res.data) {
          data = res.data2.list.map((v) => {
            return {
              title: v.roleName,
              value: v.roleId,
            };
          });
        }
        this.setColSelectOptions('角色', data);
      });
    },
    cancel() {
      this.editShow = false;
    },
    ok() {
      this.editShow = false;
      this.getList();
    },
  },
};
</script>