srm项目 系统参数设置的前端页面开发+增加相关路由+公共列表组件增加是否可以配置表头的逻辑

haoxuan

2024-02-07 302858f921bed077ab54dd31102f086bfe1add3c

 src/views/other/commonDialog/EditDropdownDialog.vue

@@ -13,12 +13,7 @@
            <el-input v-model="scope.row.name" size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="显示颜色" prop="color">
          <template slot-scope="scope">
            <el-color-picker v-model="scope.row.color" size="small" @change="colorClick(scope.row)"></el-color-picker>
          </template>
        </el-table-column>
        <el-table-column label="设为默认" prop="setDefault">
        <!-- <el-table-column label="设为默认" prop="setDefault">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.setDefault"
@@ -29,7 +24,7 @@
            >
            </el-switch>
          </template>
        </el-table-column>
        </el-table-column> -->
        <el-table-column label="操作" width="110px">
          <template slot-scope="scope">
            <i
@@ -50,10 +45,9 @@
      </el-table>
      <div style="padding: 10px">
        <el-button type="text" size="mini" @click="addDropdown">新增下拉框</el-button>
        <el-button type="text" size="mini">恢复默认颜色</el-button>
      </div>
      <div slot="footer">
        <el-button type="primary" size="small" @click="editConfig.editVisible = false">保存</el-button>
        <el-button type="primary" size="small" @click="saveClick">保存</el-button>
        <el-button size="small" @click="editConfig.editVisible = false">取消</el-button>
      </div>
    </el-dialog>
@@ -61,6 +55,7 @@
</template>

<script>
import { getSupplierTypeList, updateSupplierType, updateIndustry, getIndustryList } from "@/api/supplierManage/supplier"
export default {
  name: "EditDropdownDialog",
  props: {
@@ -85,32 +80,41 @@
    return {
      dialogWidth: "20%",
      editConfig: this.editDropdownConfig,
      tableData: [
        {
          name: "1",
          color: "red",
          setDefault: true
        },
        {
          name: "2",
          color: "blue",
          setDefault: false
        },
        {
          name: "3",
          color: null,
          setDefault: false
        },
        {
          name: "4",
          color: null,
          setDefault: false
        }
      ]
      tableData: [],
      isName: false
    }
  },
  created() {},
  created() {
    this.setList()
  },
  methods: {
    setList() {
      if (this.editConfig.title === "供应商类型") {
        this.getSupplierTypeList()
      } else if (this.editConfig.title === "所属行业") {
        this.getIndustryList()
      }
    },
    // 供应商类型
    async getSupplierTypeList() {
      await getSupplierTypeList({
        page: 1,
        pageSize: 100
      }).then((res) => {
        console.log(res.data)
        this.tableData = res.data.list
      })
    },
    // 所属行业
    async getIndustryList() {
      await getIndustryList({
        page: 1,
        pageSize: 100
      }).then((res) => {
        console.log(res.data)
        this.tableData = res.data.list
      })
    },
    handleClose() {
      this.editConfig.editVisible = false
    },
@@ -157,10 +161,55 @@
    // 新增下拉框
    addDropdown() {
      this.tableData.push({
        name: "5",
        color: null,
        setDefault: false
        ID: 0,
        name: ""
      })
    },
    // 判断添加name是否为空
    determineNameEmpty(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].name.length === 0) {
          this.isName = true
          break
        } else {
          this.isName = false
        }
      }
    },
    async saveClick() {
      console.log(this.tableData)
      this.determineNameEmpty(this.tableData)
      if (this.isName) {
        this.$message.error("名称不能为空")
      } else {
        this.tableData.map((ite) => {
          ite.ID = 0
          return { ...ite }
        })
        if (this.editConfig.title === "供应商类型") {
          updateSupplierType({
            supplierTypes: this.tableData
          }).then((res) => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success("编辑成功")
              this.$parent.getSupplierTypeList()
              this.handleClose()
            }
          })
        } else if (this.editConfig.title === "所属行业") {
          updateIndustry({
            industries: this.tableData
          }).then((res) => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success("编辑成功")
              this.$parent.getIndustryList()
              this.handleClose()
            }
          })
        }
      }
    }
  }
}