caimei365-manager-ui/src/views/sys/users/components/usersDetail.vue

/* eslint-disable vue/require-v-for-key */
<template>
  <el-card class="form-container" shadow="never">
    <el-form ref="productCateFrom" :model="productCate" :rules="rules" label-width="150px">
      <el-form-item label="用户头像">
        <single-upload v-model="productCate.icon" />
      </el-form-item>
      <el-form-item label="归属公司">
        <el-select v-model="productCate.parentId" placeholder="请选择公司" @change="changeAttrProductCate">
          <el-option v-for="item in selectProductCateList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="归属部门">
        <el-select v-model="productCate.parentId" placeholder="请选择部门" @change="changeAttrProductCate">
          <el-option v-for="item in selectProductCateList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="工号：" prop="number">
        <el-input v-model="productCate.name" />
      </el-form-item>
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="productCate.name" />
      </el-form-item>
      <el-form-item label="登录名：" prop="userName">
        <el-input v-model="productCate.name" />
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input v-model="productCate.productUnit" />
      </el-form-item>
      <el-form-item label="确认密码：" prop="password">
        <el-input v-model="productCate.productUnit" />
      </el-form-item>
      <el-form-item label="邮箱：">
        <el-input v-model="productCate.productUnit" />
      </el-form-item>
      <el-form-item label="电话：">
        <el-input v-model="productCate.productUnit" />
      </el-form-item>
      <el-form-item label="手机：">
        <el-input v-model="productCate.sort" />
      </el-form-item>
      <el-form-item label="是否阻止登录：">
        <el-radio-group v-model="productCate.showStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-select v-model="productCate.typeId" placeholder="请选择" @change="changeAttrProductCate">
          <el-option v-for="item in selectUserTypeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注：">
        <el-input v-model="productCate.description" type="textarea" :autosize="true" />
      </el-form-item>
      <el-form-item label="用户角色：">
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in selectRolesList" :key="item" :label="item.name" class="littleMarginLeft" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('productCateFrom')">保存</el-button>
        <el-button v-if="!isEdit" @click="resetForm('productCateFrom')">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
// import { fetchList, createProductCate, updateProductCate, getProductCate } from '@/api/productCate'
import SingleUpload from '@/components/Upload/singleUpload'

const defaultProductCate = {
  description: '',
  icon: '',
  keywords: '',
  name: '',
  navStatus: 0,
  parentId: 0,
  productUnit: '',
  showStatus: 0,
  sort: 0,
  productAttributeIdList: []
}
export default {
  name: 'ProductCateDetail',
  components: { SingleUpload },
  filters: {
    filterLabelFilter(index) {
      if (index === 0) {
        return '筛选属性：'
      } else {
        return ''
      }
    }
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      productCate: Object.assign({}, defaultProductCate),
      selectUserTypeList: [
        { name: '系统管理', typeId: 1 },
        { name: '部门经理', typeId: 2 },
        { name: '普通用户', typeId: 3 }
      ],
      rules: {
        number: { required: true, message: '请输入工号', trigger: 'blur' },
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入登录名', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
        ]
      },
      filterAttrs: [],
      filterProductAttrList: [
        {
          value: []
        }
      ],
      changOptionName: '',
      selectRolesList: [
        { name: 'aduit', id: 0 },
        { name: '阿斯达', id: 0 },
        { name: '电饭锅', id: 0 },
        { name: '很反感和', id: 0 },
        { name: '意义', id: 0 }
      ],
      checkList: ['选中且禁用', '复选框 A']
    }
  },
  created() {
    if (this.isEdit) {
      // getProductCate(this.$route.query.id).then(response => {
      //   this.productCate = response.data
      // })
      // getProductAttrInfo(this.$route.query.id).then(response => {
      //   if (response.data != null && response.data.length > 0) {
      //     this.filterProductAttrList = []
      //     for (let i = 0; i < response.data.length; i++) {
      //       this.filterProductAttrList.push({
      //         key: Date.now() + i,
      //         value: [response.data[i].attributeCategoryId, response.data[i].attributeId]
      //       })
      //     }
      //   }
      // })
    } else {
      this.productCate = Object.assign({}, defaultProductCate)
    }
    this.getSelectProductCateList()
  },
  methods: {
    getSelectProductCateList() {
      // fetchList(0, { pageSize: 100, pageNum: 1 }).then(response => {
      //   this.selectProductCateList = response.data.list
      //   this.selectProductCateList.unshift({ id: 0, name: '无上级分类' })
      //   this.selectProductCateList.forEach(el => {
      //     // eslint-disable-next-line eqeqeq
      //     if (el.id == this.productCate.parentId) {
      //       this.changOptionName = el.name
      //     }
      //   })
      //   console.log(this.changOptionName)
      //   this.getProductAttrCateList()
      // })
    },
    getProductAttrCateList() {
      console.log(this.changOptionName)
      // const params = { productAttrCateId: null, parentName: this.changOptionName }
      // fetchListWithAttr(params).then(response => {
      //   const list = response.data
      //   for (let i = 0; i < list.length; i++) {
      //     const productAttrCate = list[i]
      //     const children = []
      //     if (productAttrCate.productAttributeList != null && productAttrCate.productAttributeList.length > 0) {
      //       for (let j = 0; j < productAttrCate.productAttributeList.length; j++) {
      //         children.push({
      //           label: productAttrCate.productAttributeList[j].name,
      //           value: productAttrCate.productAttributeList[j].id
      //         })
      //       }
      //     }
      //     // this.filterAttrs.push({label: productAttrCate.name, value: productAttrCate.id, children: children});
      //     this.filterAttrs.push({ label: productAttrCate.name, value: productAttrCate.id })
      //   }
      // })
    },
    getProductAttributeIdList() {
      // 获取选中的筛选商品属性
      const productAttributeIdList = []
      for (let i = 0; i < this.filterProductAttrList.length; i++) {
        const item = this.filterProductAttrList[i]
        if (item.value !== null && item.value.length === 1) {
          productAttributeIdList.push(item.value[0])
        }
      }
      return productAttributeIdList
    },
    changeAttrProductCate(value) {
      this.selectProductCateList.forEach(el => {
        // eslint-disable-next-line eqeqeq
        if (value == el.id) {
          this.changOptionName = el.name
        }
      })
      console.log(this.changOptionName)
    },
    changeFilterProductAttrFn(value) {
      console.log(value)
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (this.isEdit) {
              this.productCate.productAttributeIdList = this.getProductAttributeIdList()
              // updateProductCate(this.$route.query.id, this.productCate).then(response => {
              //   this.$message({
              //     message: '修改成功',
              //     type: 'success',
              //     duration: 1000
              //   })
              //   this.$router.back()
              // })
            } else {
              this.productCate.productAttributeIdList = this.getProductAttributeIdList()
              // createProductCate(this.productCate).then(response => {
              //   this.$refs[formName].resetFields()
              //   this.resetForm(formName)
              //   this.$message({
              //     message: '提交成功',
              //     type: 'success',
              //     duration: 1000
              //   })
              // })
            }
          })
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.productCate = Object.assign({}, defaultProductCate)
      this.getSelectProductCateList()
      this.filterProductAttrList = [
        {
          value: []
        }
      ]
    },
    removeFilterAttr(productAttributeId) {
      if (this.filterProductAttrList.length === 1) {
        this.$message({
          message: '至少要留一个',
          type: 'warning',
          duration: 1000
        })
        return
      }
      var index = this.filterProductAttrList.indexOf(productAttributeId)
      if (index !== -1) {
        this.filterProductAttrList.splice(index, 1)
      }
    },
    handleAddFilterAttr() {
      if (this.filterProductAttrList.length === 3) {
        this.$message({
          message: '最多添加三个',
          type: 'warning',
          duration: 1000
        })
        return
      }
      this.filterProductAttrList.push({
        value: null,
        key: Date.now()
      })
    }
  }
}
</script>

<style scoped>
.form-container {
  width: 800px;
}
</style>