U ..

he wei

2022-07-15 05246c4f7f22d26d6845cd1da52763161a5d62e5

U ..

 src/pages/user/apis.js

@@ -11,3 +11,37 @@
    params
  })
}
/**
 * 编辑用户信息
 * @returns 
 */
export const editUser = (data) => {
  return axios({
    method: "POST",
    url: "docUser/updateUser",
    headers: {
      "Content-Type": "multipart/form-data"
    },
    data
  })
}
/**
 * 查询所有部门信息
 * @returns 
 */
export const getAllDepart = () => {
  return axios({
    method: "GET",
    url: "docDepart/getAllDepart"
  })
}
/**
 * 查询所有部门信息
 * @returns 
 */
 export const getAllRole = () => {
  return axios({
    method: "GET",
    url: "docDepart/getAllRole"
  })
}

 src/pages/user/components/userInfo.vue

@@ -1,100 +1,325 @@
<template>
  <div class="">
    <a-form
    <a-form-model
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      :model="info"
      :rules="rules"
    >
      <!-- @finish="onFinish" -->
      <a-row :gutter="24">
        <a-form-item
          :name="['info', 'faceUrl']"
          label="人脸图片"
          :rules="[{ required: true }]"
        >
          <img :src="imageUrl" alt="avatar" />
        </a-form-item>
        <a-form-item
          :name="['info', 'name']"
          label="姓名"
          :rules="[{ required: true }]"
        >
          <a-input disabled v-model="info.name" />
        </a-form-item>
        <a-form-item
          :name="['info', 'tel']"
          label="座机"
          :rules="[{ required: true }]"
        >
          <a-input disabled v-model="info.tel" />
        </a-form-item>
        <a-form-item
          :name="['info', 'phone']"
          label="手机"
          :rules="[{ required: true }]"
        >
          <a-input disabled v-model="info.phone" />
        </a-form-item>
        <a-form-item
          :name="['info', 'depart', 'departName']"
          label="组别"
          :rules="[{ required: true }]"
        >
          <a-input disabled v-model="info.depart.departName" />
        </a-form-item>
        <a-form-item
          :name="['info', 'drole', 'roleName']"
          label="角色"
          :rules="[{ required: true }]"
        >
          <a-input disabled v-model="info.drole.roleName" />
        </a-form-item>
      </a-row>
    </a-form>
      <a-layout class="transbg">
        <a-layout>
          <a-layout-sider class="transbg">
            <a-form-item label="人脸图片">
              <a-avatar
                v-if="faceUrl"
                shape="square"
                :size="104"
                :src="faceUrl"
                @click="handlePreview({ url: faceUrl })"
              />
              <a-avatar v-else :size="104" shape="square" icon="user" />
            </a-form-item>
            <a-button v-if="faceUrl" @click="deleteFace">删除人脸</a-button>
            <a-divider />
            <a-upload
              list-type="picture-card"
              :file-list="fileList"
              :beforeUpload="cancelUpload"
              @preview="handlePreview"
              @change="handleChange"
            >
              <div v-if="fileList.length < 1">
                <a-icon type="plus" />
                <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
          </a-layout-sider>
          <a-layout-content>
            <a-row>
              <a-col :span="24">
                <a-form-model-item
                  label="姓名"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                  prop="name"
                >
                  <a-input placeholder="请输入" v-model="info.name" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="座机"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                  prop="tel"
                >
                  <a-input v-model="info.tel" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="手机"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                  prop="phone"
                >
                  <a-input v-model="info.phone" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="组别"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                  prop="departId"
                >
                  <a-select :defaultValue="info.departId">
                    <a-select-option
                      v-for="(item, idx) in departList"
                      :key="'depart_' + idx"
                      :value="item.value"
                      :title="item.title"
                      >{{ item.title }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  label="角色"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18, offset: 1 }"
                  prop="roleId"
                >
                  <a-select :defaultValue="info.roleId">
                    <a-select-option
                      v-for="(item, idx) in roleList"
                      :key="'role_' + idx"
                      :value="item.value"
                      :title="item.title"
                      >{{ item.title }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-layout-content>
        </a-layout>
        <a-layout-footer class="footer">
          <a-button key="back" @click="submit">确定</a-button>
          <a-button key="cancel" @click="cancel">取消</a-button>
        </a-layout-footer>
      </a-layout>
    </a-form-model>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
import { messages } from "../../../components/setting/i18n";
const userInf = {
  faceUrl: '',
  name: '',
  id: '',
  tel: '',
  phone: '',
  // depart_id: '',
  face_id: '',
  // role_id: '',
  faceUrl: "",
  name: "",
  id: "",
  tel: "",
  phone: "",
  departId: "",
  faceId: "",
  roleId: "",
  depart: {
    departName: ''
    departName: "",
  },
  drole: {
    roleName: ''
  }
    roleName: "",
  },
  desc: "4165465",
};
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
import { editUser, getAllRole, getAllDepart } from "../apis";
export default {
  name: "",
  data() {
    return {};
    return {
      previewVisible: false,
      previewImage: "",
      fileList: [],
      roleList: [],
      departList: [],
      rules: {
        roleId: [
          {
            required: true,
            message: "请选择角色",
            trigger: "blur",
          }
        ],
        departId: [
          {
            required: true,
            message: "请选择组别",
            trigger: "blur",
          }
        ],
        phone: [
          {
            required: true,
            message: "手机号必填",
            trigger: "blur",
          },
          {
            pattern: /^1\d{10}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          }
        ],
      },
    };
  },
  components: {},
  computed: {
    faceUrl() {
      let baseUrl = location.protocol + "//" + location.hostname + ":8092/cad";
      let url = "";
      if (this.info.dface && this.info.dface.url) {
        url = baseUrl + "/face/" + this.info.dface.url.split("\\face\\")[1];
      }
      return url;
    },
  },
  props: {
    info: {
      type: Object,
      default() {
        return {
          ...userInf
        }
          ...userInf,
        };
      },
    },
  },
  methods: {
    cancelUpload() {
      return false;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
      console.log(this.fileList);
    },
    handleCancel() {
      this.previewVisible = false;
      this.previewImage = "";
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    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);
      if (this.fileList.length) {
        formData.append("file", this.fileList[0].originFileObj);
      }
      formData.append("json", json);
      editUser(formData).then((res) => {
        res = res.data;
        console.log(res);
        if (res.code && res.data) {
          this.$message.success("操作成功");
          this.$emit("cancel");
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    cancel() {
      this.$emit("cancel");
    },
    deleteFace() {
      this.$confirm({
        title: "请确认",
        content: "是否删除人脸照片？",
        onOk() {
          console.log("删除");
        },
        onCancel() {},
      });
    },
    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.departList = 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.roleList = data;
      });
    },
    resetFields () {
      this.$refs.formRef.resetFields();
    }
  },
  methods: {},

  mounted() {
    console.log(this.info, 'this.info')
    console.log(this.info, "this.info");
    this.getAllDepart();
    this.getAllRole();
    this.resetFields();
  },
};
</script>

<style scoped>
.transbg {
  background: transparent;
}
.footer {
  padding: 4px;
  text-align: right;
}
.footer button + button {
  margin-left: 8px;
}
</style>

 src/pages/user/list.vue

@@ -32,10 +32,7 @@
          <span>
            <a @click="edit(text)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="是否要删除此行？"
              @confirm="remove(text)"
            >
            <a-popconfirm title="是否要删除此用户？" @confirm="remove(text)">
              <a>删除</a>
            </a-popconfirm>
          </span>
@@ -43,8 +40,13 @@
      </advance-table>
    </div>
    <!-- 编辑用户 -->
    <a-modal :visible="editShow" title="编辑用户" @ok="handleOk">
      <user-info :info="userData"></user-info>
    <a-modal
      :visible="editShow"
      :footer="null"
      title="编辑用户"
      @cancel="cancel"
    >
      <user-info :info="userData" @cancel="cancel"></user-info>
    </a-modal>
  </a-card>
</template>
@@ -82,16 +84,16 @@
        {
          title: "组别",
          dataIndex: ["depart", "departName"],
          key: 'departName'
          key: "departName",
        },
        {
          title: "角色",
          dataIndex: ["drole", "roleName"],
          key: 'roleName'
          key: "roleName",
        },
        {
          title: "创建时间",
          dataIndex: 'creTime'
          dataIndex: "creTime",
        },
        {
          title: "操作",
@@ -153,14 +155,18 @@
      this.pageSize = pageSize;
      this.getGoodList();
    },
    handleOk() {
      this.editShow = false;
    remove(obj) {
      console.log(obj)
    },
    edit(obj) {
      console.log(obj);
      this.userData = obj.text;
      obj.text.desc = 132;
      this.userData = JSON.parse(JSON.stringify(obj.text));
      this.editShow = true;
    }
    },
    cancel() {
      this.editShow = false;
    },
  },
};
</script>