manage.vue

<template>
  <el-card class="box-card" id="manage">
    <div slot="header" class="clearfix">
      <span style="font-size:24px;color:#eff0dc">后台管理</span>
    </div>
    <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    <el-row type="flex" justify="start" style="text-align :left;border-bottom:1px solid #ebeef5;padding-bottom:18px">
      <el-col :span="6">
        <el-input class="input" v-model="contract_unid" placeholder="合同编号"></el-input>
        <el-button type="primary" @click="contract_unid_add">添加</el-button>
      </el-col>
      <el-col :span="6">
        <el-input class="input" v-model="customer_name" placeholder="客户名称"></el-input>
        <el-button type="primary" @click="customer_name_add">添加</el-button>
      </el-col>
      <el-col :span="6">
        <el-input class="input" v-model="salesperson" placeholder="销售员"></el-input>
        <el-button type="primary" @click="salesperson_add('employee')">添加</el-button>
      </el-col>
      <el-col :span="6">
        <el-input class="input" v-model="project_name" placeholder="项目名称"></el-input>
        <el-button type="primary" @click="project_name_add">添加</el-button>
      </el-col>
    </el-row>
    <el-row style="border-bottom:1px solid rgb(235, 238, 245);padding-bottom:18px">
      <el-col :span="6">
        <el-button class="add_button" type="primary" @click="add_login_user">添加登录用户</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-button class="add_button" type="primary" @click="product_line_type">产品线类型</el-button>
      </el-col>
      <el-col :span="6">
        <el-button class="add_button" type="primary" @click="contract_statu">合同状态</el-button>
      </el-col>
      <el-col :span="6">
        <el-button class="add_button" type="primary" @click="contract_type">合同性质</el-button>
      </el-col>
      <el-col :span="6">
        <el-button class="add_button" type="primary" @click="amount_statu">账款状态</el-button>
      </el-col>
    </el-row>
    <el-dialog id="login_user_dialog" title="添加登录户" :visible.sync="login_user_dialog_show" width="30%" :show-close="false">
      <el-form :model="login_user_form" label-width="100px" label-position="left" :rules="login_user_form_rules" ref="login_user_form">
        <el-form-item label="用户类型" prop="role_unid">
          <el-select v-model="login_user_form.role_unid" clearable placeholder="用户类型" style="width:100%">
            <el-option v-for="item in roles" :key="item.role_unid" :label="item.name" :value="item.role_unid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="login_user_form.username" placeholder="用户名" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="login_user_form.name" placeholder="姓名" style="width:100%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="login_user_dialog_cancel()">取 消</el-button>
        <el-button type="primary" @click="login_user_dialog_confirm()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="add_dialog_show" width="30%" :show-close="false" style="max-height:800px">
      <el-input v-model="add_data.text"></el-input>
      <el-button type="primary" style="width:100%;margin-bottom:20px;margin-top:5px" @click="add_to_database">添加</el-button>
      <el-table :data="add_data.data" highlight-current-row border>
        <el-table-column label="名称" prop="name" min-width="30%" align="center">
        </el-table-column>
        <el-table-column label="码" prop="code" min-width="30%" align="center">
        </el-table-column>
        <el-table-column label="操作" min-width="20%" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="delete_code(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>

</template>

<script>
  export default {
    name: "manage",
    data() {
      return {
        add_dialog_show: false,
        login_user_dialog_show: false,
        code_base_url: this.$disparch_data.code_base_url,
        contract_base_url: this.$disparch_data.contract_base_url,
        auth_base_url: this.$disparch_data.auth_base_url,
        contract_unid: null,
        customer_name: null,
        salesperson: null,
        project_name: null,

        add_data: {
          text: null,
          data: [],
          url: null
        },
        roles: [],
        login_user_form: {
          role_unid: "",
          username: "",
          name: "",
          password: "0000",
          norm_type: "login"
        },

        login_user_form_rules: {
          username: {
            required: true,
            pattern: /^[a-zA-Z]{2,8}$/,
            message: "请输入2至8位英文",
            trigger: "blur"
          },
          name: {
            required: true,
            message: "请输入用户姓名",
            trigger: "blur"
          },
          role_unid: {
            required: true,
            message: "请选择用户类型",
            trigger: "blur"
          }
        }
      };
    },
    methods: {
      // -----------------------
      product_line_type() {
        this.add_data.url = this.code_base_url + "custom/cates/4FC51AD3C9/codes";
        this.get_data(this.add_data.url);
      },
      contract_statu() {
        this.add_data.url = this.code_base_url + "custom/cates/13BEFACBCF/codes";
        this.get_data(this.add_data.url);
      },
      contract_type() {
        this.add_data.url = this.code_base_url + "custom/cates/8EC31D08A0/codes";
        this.get_data(this.add_data.url);
      },
      amount_statu() {
        this.add_data.url = this.code_base_url + "custom/cates/42407C5EF2/codes";
        this.get_data(this.add_data.url);
      },
      delete_code(data) {
        this.$Axios({
          method:'delete',
          url:this.add_data.url + '/' + data.unid
        }).then(res=>{
          this.show_message('删除成功','success')
          this.get_data(this.add_data.url)
        })
        
      },
      get_data(url) {
        this.$Axios.get(url).then(res => {
          if (res.data.list_data) {
            this.add_data.data = res.data.list_data;
            this.add_dialog_show = true;
          }
        });
      },
      add_to_database() {
        var code = 0;
        this.add_data.data.forEach(e => {
          if (e.code > code) {
            code = e.code;
          }
        });
        code++;
        this.$Axios({
          method: "post",
          url: this.add_data.url,
          data: {
            name: this.add_data.text,
            note: this.add_data.text,
            code: code
          }
        }).then(res => {
          if (res.data.code == code) {
            this.show_message("添加成功", "success");
            this.add_data.text = null;
            this.get_data(this.add_data.url);
          }
        });
      },
      // -----------------------
      contract_unid_add() {
        if (this.contract_unid) {
          this.$Axios({
            method: "post",
            data: { contract_unid: this.contract_unid },
            url: this.contract_base_url,
            headers: { "Content-Type": "application/json" }
          })
            .then(response => {
              if (response.data.ecode == "200") {
                this.contract_unid = null;
                this.show_message("添加成功", "success");
              } else if (response.data.ecode == "600") {
                this.show_message("重复的合同编号", "error");
              } else {
                this.show_message("添加失败", "error");
              }
            })
            .catch(err => {
              console.log(err);
              this.show_message("添加失败", "error");
            });
        } else {
          this.show_message("请填写信息", "info");
        }
      },
      customer_name_add() {
        if (this.customer_name) {
          this.$Axios({
            method: "post",
            url: this.contract_base_url + "customers",
            data: { customer_name: this.customer_name },
            headers: { "Content-Type": "application/json" }
          })
            .then(response => {
              if (response.data.ecode == "200") {
                this.customer_name = null;
                this.show_message("添加成功", "success");
              } else if (response.data.ecode == "600") {
                this.show_message("重复的客户名称", "error");
              } else {
                this.show_message("添加失败", "error");
              }
            })
            .catch(err => {
              console.log(err);
              this.show_message("添加失败", "error");
            });
        } else {
          this.show_message("请填写信息", "info");
        }
      },
      salesperson_add(type) {
        if (this.salesperson) {
          this.$Axios({
            method: "post",
            url: this.auth_base_url + "users",
            data: {
              norm_type: type,
              username: this.salesperson,
              name: this.salesperson,
              password: "0000"
            },
            headers: { "Content-Type": "application/json" }
          })
            .then(response => {
              if (response.data.name) {
                this.salesperson = null;
                this.show_message("添加成功", "success");
              }
            })
            .catch(err => {
              this.show_message("添加失败", "error");
              console.log(err.message);
            });
        } else {
          this.show_message("请填写信息", "info");
        }
      },
      project_name_add() {
        if (this.project_name) {
          this.$Axios({
            method: "post",
            url: this.contract_base_url + "projects",
            data: { project_name: this.project_name },
            headers: { "Content-Type": "application/json" }
          })
            .then(response => {
              this.project_name = null;
              if (response.data.ecode == "200") {
                this.show_message("添加成功", "success");
              } else if (response.data.ecode == "600") {
                this.show_message("重复的项目名称", "error");
              } else {
                this.show_message("添加失败", "error");
              }
            })
            .catch(err => {
              console.log(err);
              this.show_message("添加失败", "error");
            });
        } else {
          this.show_message("请填写信息", "info");
        }
      },
      show_message(message, type) {
        this.$message({
          message: message,
          type: type,
          center: true,
          showClose: true,
          duration: 3000
        });
      },
      add_login_user() {
        this.$Axios({
          method: "get",
          url: this.auth_base_url + "roles"
        })
          .then(response => {
            if (response.data.list_data) {
              this.roles = response.data.list_data;
              this.login_user_dialog_show = true;
            } else {
              this.show_message("失败", "error");
            }
          })
          .catch(err => {
            this.show_message("失败", "error");
            console.log(err.message);
          });
      },
      login_user_dialog_cancel() {
        this.$refs["login_user_form"].resetFields();
        this.login_user_dialog_show = false;
      },
      login_user_dialog_confirm() {
        this.$refs["login_user_form"].validate(valid => {
          if (valid) {
            this.$Axios({
              method: "post",
              url: this.auth_base_url + "users",
              headers: { "Content-Type": "application/json" },
              data: this.login_user_form
            })
              .then(res => {
                if (res.data.user_unid) {
                  this.$Axios({
                    method: "post",
                    url:
                      this.auth_base_url +
                      "users/" +
                      res.data.user_unid +
                      "/roles",
                    headers: { "Content-Type": "application/json" },
                    data: {
                      role_unid: this.login_user_form.role_unid
                    }
                  })
                    .then(res => {
                      this.show_message("添加成功,默认密码: 0000", "success");
                      this.$refs["login_user_form"].resetFields();
                      this.login_user_dialog_show = false;
                    })
                    .catch(err => {
                      this.login_user_dialog_show = false;
                      this.show_message("添加失败", "error");
                    });
                } else {
                  this.show_message("添加失败", "error");
                }
              })
              .catch(err => {
                console.log(err);
                this.show_message("添加失败", "error");
              });
          }
        });
      }
    },
    created() {}
  };
</script>

<style scoped>
.el-col {
  text-align: center;
}
.input {
  width: 200px;
}
.add_button {
  display: inline-block;
  font-size: 18px;
  width: 75%;
  min-width: 200px;
  margin-top: 20px;
}

#manage >>> .el-button--primary {
  border-color: #34352c;
  background-color: #34352c;
}
#manage >>> label {
  color: black;
}
#manage >>> .el-card__body {
  background: lightgray;
}
#manage >>> input {
  border-color: black;
  color: black;
}
#manage >>> .el-card__header {
  background-color: #34352c;
}
</style>